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

我已经成功地在我的Angular应用程序中使用了Observables。到目前为止，我一直在显式订阅组件，然后使用*ngFor在视图中迭代记录数组。现在，我想通过在各种视图中使用Angular的异步管道来简化事情，以便处理订阅和取消订阅。到目前为止，这还不起作用

这是我最初拥有的（我在组件中订阅的位置）：

然后在视图中，我做了以下工作：

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

因此，为了使用异步管道，我将我的组件ngOnInit调用更改为this，其中我显式地声明这是一个可观察的，并将其分配给变量“records”：

然后在视图中添加了异步管道，如下所示：

import { Observable } from 'rxjs/Observable';

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

---

我不确定还有什么必要通过异步管道通过订阅来获得填充结果。知道我的代码有什么遗漏或错误吗？

const records

是一个局部变量。您需要将其设置为字段，以便模板能够访问此变量

例：

记录$：可见；
恩戈尼尼特（）{
this.records$=this.clientService.getAll（1，this.pagesize）；
}

在视图中（假设您使用的是角度4+）：

尝试了此操作，但出现了几个错误：1.“；”预期的位置“：”在“this.records”之后2.“找不到名称'any'”3.）而“=”在哪里，我得到了“expression expected”@Muirik，例如？这些错误都显示在我的IDE-Visual Studio代码中。它似乎不想让我声明“this.records”这里。@Muirik那么你应该接受dbandsta的回答。这个答案让我想到在answerError:inline模板：27:24下写评论，原因是：无法读取的属性“data”null@Muirik

那件事怎么样。我用Angular4+解决方案更新了我的答案。如果你使用的是Angular 2.x，那么你可以使用echonax所说的。这两个答案的组合帮助我们得到了最终的解决方案。谢谢你们两位。

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

import { Observable } from 'rxjs/Observable';

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

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');
}

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

records$: Observable<any>;

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

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