Question

我正在尝试在Angular 2中构建一个组件，它接受一个数据对象数组，一个来自父组件的文件名，创建一个包含数据的csv文件，并使用提供的文件名在浏览器中为用户下载文件。基本上，一个可重用的ExportCSV组件。我在找到使用Observable来实现这一目标的正确方法时遇到了问题。在子组件对其进行操作之前，父组件需要从Rest API检索数据。父组件具有单独的关联服务以检索数据。此数据在服务器上进行分页，导出应包含整个结果集，而不仅仅是客户端上的当前页面。这会强制需要在单击导出按钮时获取整个结果集。如果有人有这方面的经验，请提供我应该如何实现这一目标的指示。提前谢谢！

以下是相关代码的一些片段：

export class InvoiceListComponent {
invoiceFullList: Observable<Array<Invoice>>;
...
setExportable(event: any) {

    let params = new InvoiceSearchFilter();

    this._invoiceService.getAllInvoices(params)
      .subscribe(
      (response: any) => {
        this.invoiceFullList = response.json().data;
      },
      () => { });
   }
}
<csv-export [dataList]="invoiceFullList | async" [fileName]='exportFileName'     (exportClickEvent)="setExportable($event)"></csv-export>

export class CsvExportComponent {
@Input() dataList: Array<any>;
@Input() fileName: string = 'data-export';
@Output() exportClickEvent: EventEmitter<{}> = new EventEmitter();
...
exportIt() {
    this.exportClickEvent.emit();
    if (!this.dataList || this.dataList.length < 1) {
        return false;
    }
    this.buttonEnabled = 'disabled';
    this.convertToCSV(this.dataList);
}
...
}
<button name="export-button" type="button" class="btn btn-primary btn-export" [disabled]='buttonEnabled' (click)="exportIt()">CSV Export</button>

Answer 1

其中一种方法是使用|async管道。

父组件的模板

<child [someInput]="someObservable | async"></child>

Answer 2

一个快速的解决方案是使用ngIf，除非invoiceFullList中有数据，否则不会呈现子组件：

<csv-export *ngIf="invoiceFullList" [dataList]="invoiceFullList" [fileName]='exportFileName' (exportClickEvent)="setExportable($event)"></csv-export>

async管道在这种情况下不可行，因为invoiceFullList不是Observable。当您不手动订阅时，将使用异步管道，因此异步管道会为您执行此操作，但您正在订阅请求并填充不能使用异步管道的阵列。

Answer 3

我为其他可能感兴趣的人找到了解决方案。我在我的组件中实现了OnChanges生命周期钩子，并在ngOnChanges函数中查找我的绑定数据的更改，如下所示：

ngOnChanges(changes: SimpleChanges) {
   if  (changes['dataList'] && this.dataList && this.dataList.length > 0) {
       this.convertToCSV(this.dataList);
   }
}

如何从一个Angular组件获取异步数据到另一个

3 个答案: