Angular 嵌套的 ngFor 无法绑定，因为它不知道属性

Question

我很欣赏这是一个讨论得很好的话题，但是尽管对相关问题进行了大量阅读，但我似乎找不到解决方案。

在我的例子中，我只是想遍历嵌套的对象数组并将它们显示在我的 Angular 应用程序 中。我的要求几乎与这个例子相同：https://stackblitz.com/edit/angular-4rq4mf?file=app%2Fapp.component.ts

我遇到的问题是，当我尝试执行嵌套 *ngFor 循环时，出现以下错误：

Can't bind to 'ngForFor' since it isn't a known property of 'li'. ("<h4>Staff</h4><ul><li [ERROR ->]*ngFor="let staff for futureBooking.users">{{ staff.name }}</li></ul></div>")

模板

<ul>
  <li *ngFor="let futureBooking of futureBookings">
    <h3>{{futureBooking.classes_covered}}</h3>
    <div *ngIf="futureBooking.users.length">
      <h4>Staff</h4>
      <ul>
        <li *ngFor="let staff for futureBooking.users">{{ staff.name }}</li>
      </ul>
    </div>
  </li>
</ul>

BookingsPage class（摘录）：

futureBookings = [];
private getFutureRequests() {
  this.booking.getFuture().subscribe(bookings => { 
    this.futureBookings = bookings;
  });
  return this.futureBookings;
}

futureBookings 的 JSON（摘录）：

附加信息

初始 *ngFor 循环没有问题。我可以毫无问题地访问详细信息。事实上，如果我直接引用子数组数据（例如 {{ futureBooking.users[0].name }}），我可以毫无问题地访问它。

我对 Angular 很陌生，但对 JS 很熟悉，所以这让我很困惑。我想知道这是否是数据访问问题，但由于 futureBooking 变量是可访问的并且 users 参数是该数组项的子项，所以我迷路了。

Answer 1

ngFor 在嵌套循环中需要是 ngFor of 而不是 for 认为那里有错字

尝试更改此行

<li *ngFor="let staff for futureBooking.users">{{ staff.name }}</li>

到这个

<li *ngFor="let staff of futureBooking.users">{{ staff.name }}</li>

Angular 嵌套的 ngFor 无法绑定，因为它不知道属性

Angular Nested ngFor can't bind since it isn't a know property

ngfor

angular

模板

BookingsPage class（摘录）：

futureBookings 的 JSON（摘录）：

附加信息

Angular 嵌套的 ngFor 无法绑定，因为它不知道 属性

Angular Nested ngFor can't bind since it isn't a know property

ngfor

angular

模板

BookingsPage class（摘录）：

futureBookings 的 JSON（摘录）：

附加信息

Angular 嵌套的 ngFor 无法绑定，因为它不知道属性