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，我在其中明确声明 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

const records 是一个局部变量。您需要将其设为字段，模板才能访问此变量。

例如：

public records: any;
ngOnInit() {
    this.records = this.clientsService.getAll(1, this.pagesize);
    console.log(this.records);
}

Answer 2

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">