异步管道未处理Angular 2应用程序中预期的订阅

Question

我在Angular应用程序中成功使用了Observables.到目前为止,我已经在组件中明确订阅,然后使用*ngFor迭代视图中的记录数组.现在我想通过在各种视图中使用Angular的异步管道来简化事情 - 这样就可以处理订阅和取消订阅.到目前为止,这是行不通的.

这就是我原来的(我在组件中订阅的地方):

ngOnInit() {
    this.clientService.getAll(1, this.pagesize)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            console.log(this.records);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

然后在视图中我做了以下事情:

<tr *ngFor="let record of records.data>

顺便说一句,来自API的数据结构看起来像这样(我正在迭代的记录在"data"数组中,因此在上面的*ngFor中的"records.data"):

{
  "count": 15298,
  "data": [
    {

因此,为了转向使用异步管道,我将组件ngOnInit调用更改为this,其中我明确声明这是一个可观察的,并将其分配给变量"records":

ngOnInit() {
    const records: Observable<any> = this.clientsService.getAll(1, this.pagesize);
    console.log(this.records);
}

我还将来自RxJs的可观察导入带入了组件,如下所示:

import { Observable } from 'rxjs/Observable';

然后在视图中我添加了异步管道,如下所示:

<tr *ngFor="let record of records.data | async">

正如我所提到的,这是行不通的.我没有收到任何控制台错误,我只是没有看到填充到视图的任何数据.此外,在控制台中,"records"是一个空数组.

顺便说一句,我的服务"getAll"调用如下所示:

getAll(page, pagesize) {
    return this.http.get
    (`https://api.someurl.com/${this.ver}/clients?apikey=${this.key}&page=${page}&pagesize=${pagesize}`)
        .map((response: Response) => response.json())
        .catch(this.errorHandler);
}
    errorHandler(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

我不确定还有什么必要通过这里的异步管道通过订阅填充结果.我的代码在这里有什么缺失或错误的想法？

Answer 1

records$: Observable<any>;

ngOnInit() {
  this.records$ = this.clientService.getAll(1, this.pagesize);
}

在视图中(假设您使用的是Angular 4+):

<table *ngIf="records$ | async as records">
  <tr *ngFor="let record of records.data">