Javascript Angular 7获取关键字列表的google搜索结果计数

已编辑

我有一个CSVRecord类型，如下所示：

  export class CSVRecord {
    public id: any;
    public pubversion: any;
    public guid: any;
    public keywords: any;
    public seometriccount: any;
  }

我试图从我的csv中读取值，并在td中显示它，我可以从下面的代码中实现

app.component.html

<input type="file" #csvReader name="Upload CSV" id="txtFileUpload" (change)="uploadListener($event)" accept=".csv" />
<table class="minimalistBlack" *ngIf="records.length > 0">
    <thead>
        <tr>
            <th>ID </th>
            <th>Pub version </th>
            <th>GUID </th>
            <th>Keywords </th>
            <th>SEO Metric count </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let record of records; let i = index;">
            <td> <span>{{record.id}}</span> </td>
            <td> <span>{{record.pubversion}}</span> </td>
            <td> <span>{{record.guid}}</span> </td>
            <td> <span>{{ record.keywords }}</span> </td>
            <td> <span>{{ record.seometriccount }}</span> </td>
        </tr>
    </tbody>
</table>

身份证件
酒吧版
指南
关键词
SEO度量计数
{{record.id}
{{record.pubversion}
{{record.guid}
{{record.keywords}}
{{record.seometriccount}

应用程序组件.ts

import { Component, ViewChild } from '@angular/core';
import { CSVRecord } from './CSVModel';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Angular7-readCSV';

  public records: any[] = [];
  @ViewChild('csvReader') csvReader: any;

  uploadListener($event: any): void {

    let text = [];
    let files = $event.srcElement.files;

    if (this.isValidCSVFile(files[0])) {

      let input = $event.target;
      let reader = new FileReader();
      reader.readAsText(input.files[0]);

      reader.onload = () => {
        let csvData = reader.result;
        console.log(csvData);
        let csvRecordsArray = (<string>csvData).split(/\r\n|\n/);

        let headersRow = this.getHeaderArray(csvRecordsArray);

        this.records = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, headersRow.length);
      };

      reader.onerror = function () {
        console.log('error is occured while reading file!');
      };

    } else {
      alert("Please import valid .csv file.");
      this.fileReset();
    }
  }

  getDataRecordsArrayFromCSVFile(csvRecordsArray: any, headerLength: any) {
    let csvArr = [];

    for (let i = 1; i < csvRecordsArray.length; i++) {
      let curruntRecord = (<string>csvRecordsArray[i]).split(',');
      if (curruntRecord.length == headerLength) {
        let csvRecord: CSVRecord = new CSVRecord();
        csvRecord.id = curruntRecord[0].trim();
        csvRecord.pubversion = curruntRecord[1].trim();
        csvRecord.guid = curruntRecord[2].trim();
        csvRecord.keywords = curruntRecord[3].trim();
        csvRecord.seometriccount = curruntRecord[4];
        csvArr.push(csvRecord);

      }
    }
    return csvArr;
  }

  isValidCSVFile(file: any) {
    return file.name.endsWith(".csv");
  }

  getHeaderArray(csvRecordsArr: any) {
    let headers = (<string>csvRecordsArr[0]).split(',');
    let headerArray = [];
    for (let j = 0; j < headers.length; j++) {
      headerArray.push(headers[j]);
    }
    return headerArray;
  }

  fileReset() {
    this.csvReader.nativeElement.value = "";
    this.records = [];
  }
}

从'@angular/core'导入{Component，ViewChild}；
从“/CSVModel”导入{CSVRecord}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题='Angular7 readCSV'；
公共记录：任何[]=[]；
@ViewChild（“csvReader”）csvReader:任何；
uploadListener（$event:any）：无效{
让text=[]；
let files=$event.srcielement.files；
if（此.isvalidcsv文件（文件[0]））{
让输入=$event.target；
let reader=new FileReader（）；
reader.readAsText（input.files[0]）；
reader.onload=（）=>{
设csvData=reader.result；
console.log（csvData）；
让csvRecordsArray=（csvData）.split（/\r\n |\n/）；
让headersRow=this.getHeaderArray（csvRecordsArray）；
this.records=this.getDataRecordsArray fromCSvFile（csvRecordsArray，headersRow.length）；
};
reader.onerror=函数（）{
console.log（'读取文件时出错！'）；
};
}否则{
警报（“请导入有效的.csv文件”）；
这个.fileReset（）；
}
}
GetDataRecordsArray fromCSvFile（csvRecordsArray:any，headerLength:any）{
设csvArr=[]；
for（设i=1；i

输出：

现在，我需要在输出的最后一列中显示google搜索结果计数，使用关键字（来自上一列）

例如：如果我的

关键字
列包含诸如-Amazon、Firestick、bla-bla之类的关键字。。然后，我的脚本应该在谷歌上搜索这些关键字，并显示第1页的结果计数

假设在第1页，它有5个结果，它应该显示5个

1） 我如何做到这一点这可以用角度来完成吗

2） 请用代码解释一下，因为我是angular 7的新手。首先，您试图实现的目标完全不是用户友好的。
记住，angular会在每次更改模型或UI中的某些内容时尝试绑定单元格，（我不确定，但有时即使你滚动页面，它也会尝试重新绘制UI，因此你需要缓存结果，否则你会不断向谷歌提出请求，这可能会导致你的客户端IP地址获得验证码，而没有结果返回给你）

因此，尽量减少影响：

在html中：

  <td> <span>{{ GetResultFromGoogle(record) }}</span> </td>

它不应该是
record.keywords
？是的，也尝试了
record.keywords
。但是没有显示任何内容，所以
关键字
值是数组
['abc'，'qwe'，'rew']
？对于每个记录，是的，理想情况下……这些值来自excel行。因此，如果我在excel中提供10个逗号分隔的值，那么如果它们以数组形式出现，则需要在我的tdwell中显示相同的值，
记录[1]。关键字：['abc'，'qwe'，'rew']，记录[2]。关键字：['xxx'，'yyy'，'zzz']
等等，
连接（'，'））
应该可以。请稍微调查一下，看看
关键字的值是什么类型的。另外，不要在所有事情上都使用
任何
类型。试着定义你的类型。否则你使用的是typescript什么是谷歌URL和所需的参数搜索？你能详细说明吗？对不起，兄弟，但你必须更加努力：
    public GetResultFromGoogle(record:CSVRecord ):number {

    if(!record.seometriccount)
    {
    // search google for result and get what you want, answering to this part, is for another quesiton
        this.httpClient.get(googleUrl, neededParamsForSearch).subscribe( data=>{
        //extract result by Xpath  and set to your record
         return record.seometriccount = resultCount;
        });

    }
    else
        return record.seometriccount;

    }