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

Question

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

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

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

  

无法绑定到“ ngForFor”，因为它不是“ 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类（摘录）：

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 的，而不是 for 的认为存在错字

尝试更改此行

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

对此

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