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

我想在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>

来源

2017-02-21 Lee Matthews

请张贴代码演示您尝试来完成你试过了，什么什么，以及在哪里失败。 –

一种是使用|async管。

父组件的模板

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

来源

2017-02-21 16:21:51

管道'AsyncPipe'的无效参数'[object object]，[object object]，[object Object]，[object Object]，[object Object]，[object Object]]' –

对不起，没有看到一些代码不知道。 –

'| async'只能与'Observable'或'Promise'一起使用。 'invoiceFullList'是没有的。你的代码的实际问题是什么？如果你删除'|来自您发布的代码的异步'应该可以正常工作。 –

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

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

的async管不在这种情况下可行，因为invoiceFullList不是可观察的。异步管道在您没有手动订阅时使用，因此异步管道会为您执行此操作，但您正在订阅请求并填充不能使用异步管道的数组。

来源

2017-02-21 22:03:42 Alex

我找到了一个可能感兴趣的人的解决方案。我实现了OnChanges生命周期钩在我的组件和ngOnChanges函数查找更改我的绑定数据像这样：

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

来源

2017-02-22 13:05:32

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

回答

相关问题