EDITED
我的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>
app.component.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 = [];
}
}
输出:
现在,我需要使用关键字(在上一列中)在输出的最后一列中显示google搜索结果计数。
例如:如果我的Keywords
列中包含-亚马逊,Firestick,bla bla ..等关键字,那么我的脚本应在google中搜索这些关键字并显示第1页的结果计数。
在第1页上说,它有5个结果,应该显示5。
1)我该如何实现? -可以使用Angular完成吗?
2)请用代码解释,因为我是角度7的新手
首先,您要实现的目标根本不是用户友好的。只是要记住,每次在模型或UI中进行更改时,angular都会尝试绑定单元格(我不确定,但是有时即使滚动页面,它也会尝试重新绘制UI,因此需要缓存结果,否则,您将不断向Google提出请求,这可能会导致您的客户端IP地址获得验证码,并且没有结果返回给您)
所以要尽量减少影响:
使用html:
<td> <span>{{ GetResultFromGoogle(record) }}</span> </td>
以Ts:
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;
}