找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables，例如数组。在

Question

我的HTML代码

 <tr *ngFor="let itemObj of mOrder;let i = index" [attr.data-index]="i">
   <td> 
      <label *ngFor="let f of itemObj.items">{{f.title}}</label>
   </td>
 </tr>

我的Ts码

  

mOrder：订单[] = [];

readOrdersFromServer() {
    console.log("readOrdersFromServer called");

    this.firestore.collection('orders').snapshotChanges().take(1).subscribe(data => {
      data.map(e => {
        console.log(e.payload.doc.id);

       this.mOrder.push(e.payload.doc.data() as Order);
       console.log("order itrems2 "+(e.payload.doc.data() as Order).items[0].title.toString());


      });
    });
  }


  class Address{
      name;mobile;address;city;
    }
    class Order{
      address:Address;
      created;
      items:OrderItem[]=[];
    }
    class OrderItem{
      action;title;fee;
    }

但这显示此错误

  

core.js：12301错误错误：找不到其他支持对象   类型为“对象”的“ [对象对象]”。 NgFor仅支持绑定到   数组等可迭代对象。       在

当我尝试此代码时，它就起作用

<label>{{itemObj.items[0].title}}</label>

这意味着它包含值并且它是一个数组，但是请不要解释为什么它显示错误

感谢您的支持，我已经解决了这个问题

Answer 1

mOrders$: Observable<Order[]>;

...

readOrdersFromServer() {
  console.log("readOrdersFromServer called");
  this.mOrders$ = this.firestore.collection('orders') 
  .valueChanges()
  .pipe(first());

}

...
<ng-container *ngIf="mOrders$ | async as mOrders">
  <tr *ngFor="let itemObj of mOrders;let i = index" [attr.data-index]="i">
   <td> 
      <label *ngFor="let f of itemObj.items">{{f.title}}</label>
   </td>
 </tr>
</ng-container>

由于您没有查找文档的ID，因此将方法更改为valueChanges（）。另外，为避免内存泄漏，我设置了一个名为mOrders$的新变量，该变量将观察Order[]（并将在模板中进行预订，因此在销毁组件时它将完成）。在HTML中，我添加了*ngIf以便仅在Observable返回真值时运行。