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

【问题标题】：How to get asynchronous data from one Angular component to another如何从一个Angular组件获取异步数据到另一个
【发布时间】：2023-04-02 21:30:02
【问题描述】：

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

以下是相关代码的一些sn-ps：

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>

【问题讨论】：

请发布代码，展示您尝试完成的工作、尝试的工作以及失败的地方。

标签： angular observable

【解决方案1】：

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

父组件的模板

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

【讨论】：

该管道出现以下错误：Invalid argument '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]] ' 用于管道 'AsyncPipe'
| async 只能与Observable 或Promise 一起使用。 invoiceFullList 没有。您的代码的实际问题是什么？如果删除 ` |您发布的代码中的 async` 应该可以正常工作。

【解决方案2】：

一个快速的解决方案是使用ngIf，它不会渲染子组件，除非invoiceFullList 中有数据：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：