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 调用更改为这个，我明确声明这是一个可观察的，并将它分配给一个变量 "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">

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

Async Pipe Not Handling Subscription as Expected in Angular 2 App

javascript

observable

angular2-observables

angular