Angular 无法读取来自解析程序的数组的未定义属性长度_Angular

Angular 无法读取来自解析程序的数组的未定义属性长度

angular

Angular 无法读取来自解析程序的数组的未定义属性长度,angular,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(i

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

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中我想询问这个解析器的长度时，我得到了一个错误

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

我想这可能是因为我解析了一个可观测的，当我得到正确的结果时，它们没有长度

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


纳姆
{{bier.naam}
我是李杰

我已经尝试使用

mijnBieren？.length

，但即使列表不是空的，也会返回空列表

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

this.route.data

异步生成数据，这就是您订阅它以从中提取数据的原因

以下是您可以做的：

public mijnbieren$: Observable<Bier[]>;

constructor(private route: ActivatedRoute) {}

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

public mijnbieren$：可观察；
构造函数（专用路由：ActivatedRoute）{}
恩戈尼尼特（）{
this.mijnbieren$=this.route.data.pipe(
映射（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>


纳姆
{{bier.naam}
我是李杰

在这里，我们不同意可观测的。相反，我们将其映射为将

mijnbieren

分配给属性

mijnbieren$

。然后，我们使用模板中的

async

管道将其展开。

this.route.data