Question

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

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>

我已经尝试使用mijnBieren?.length，但是即使列表不为空，这也会返回一个空列表。

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

Answer 1

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分配给属性mijnbieren$。然后，我们在模板中使用async管道将其解包。

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

1 个答案: