时间戳

首页 > 解决方案 > 对于来自解析器的数组，无法读取未定义的属性长度

angular - 对于来自解析器的数组，无法读取未定义的属性长度

问题描述

我有一个来自解析器的数组。

private _fetchBieren: Bier[];
private _fetchBrouwers: Brouwer[];

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.data.subscribe(items => this._fetchBrouwers = items['brouwers']);
  this.route.data.subscribe(items => this._fetchBieren = items['mijnbieren']);
}

get mijnBieren$() {
  return this._fetchBieren;
}

在我的 HTML 中，我想询问此解析器的长度时出现错误

无法读取未定义的属性“长度”

我认为这可能是因为我解决了一个 observable 并且当我做对时，它们没有长度。

<div *ngIf="mijnBieren$.length > 0; else empty">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Naam</th>
     </tr>
      </thead>
      <tbody>
        <tr *ngFor="let bier of mijnbieren$">
          <td>{{bier.naam}}</td>
                  </tr>
      </tbody>
    </table>
  </div>
</div>
<ng-template #empty>
  <div>Je lijst is leeg</div>
</ng-template>

我已经尝试过使用mijnBieren?.length，但这也会返回一个空列表，即使在列表不为空的情况下也是如此。

我希望在有值时显示列表，如果没有我希望显示我的模板并说列表为空。

标签： angular

解决方案

this.route.data异步生成数据，这就是您订阅它以便从中提取数据的原因。

以下是您可以执行的操作：

public mijnbieren$: Observable<Bier[]>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.mijnbieren$ = this.route.data.pipe(
    map(items => items['mijnbieren'])
  )
}

在您的模板中：

<div *ngIf="(mijnBieren$ | async as mijnBieren).length > 0; else empty">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Naam</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let bier of mijnbieren">
        <td>{{bier.naam}}</td>
      </tr>
    </tbody>
  </table>
</div>

<ng-template #empty>
  <div>Je lijst is leeg</div>
</ng-template>

这里我们没有订阅 Observable。相反，我们将其映射为分配mijnbieren给一个 property mijnbieren$。然后我们使用async模板中的管道来解开它。

推荐阅读