Angular 6 火碱数据库具有多个子键，就像在我的结构中一样

Question

在我的Firebase数据库结构中，我需要将产品从此发货表中检索为我的Angular 6 HTML表格格式，我只能访问运输数据，但我无法访问产品子数据。它说错误：找不到类型为"对象"的不同支持对象"[对象对象]"。NgFor 仅支持绑定到可迭代对象(如数组(。

**Shippment.service.TS:**
    getshippings() {
      this.shippings = this.db.list("shippings");
       return this.shippings;
     }
**UserComponent.TS:**
    export class UserComponent implements OnInit {
      [x: string]: any;
      shippinglist : Billing[];
      user:User;
      shipping: Billing;
      constructor(public authService: AuthService,
        private shippingService:ShippingService) {}
      ngOnInit() {
        this.getAllProducts();
      }
      getAllProducts() {
    const x = this.shippingService.getshippings();
    x.snapshotChanges().subscribe(
      product =>  {
        this.shippinglist = [];
        product.forEach(element =>  {
          const y = element.payload.toJSON();
          y["$key"] = element.key;
          this.shippinglist.push(y as Billing);
        });
      }
    );
  }
    }
** Billing.TS:**
    export class Billing {
           $key: string;
           firstName: string;
           lastName: string;
           emailId: string;
           address: string;
           landmark: string;
           country: string;
           state: string;
           zip: string;
           city:string;
           phone:number;
           products : [{
              $key?: string;
              productId: number;
              title: string;
              category: string;
              price: number;
              descr: string;
              imageUrl: string;
         }]
      }
**HTML:**
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th> Address </th>
                <th> Email ID </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let p of shippinglist">
                <td>{{p.firstName}} {{p.lastName}}</td>
                <td>{{ p.address }}, {{p.landmark}},{{p.city}}, {{p.state}}, 
                     {{p.country}},{{p.zip}}</td>
                <td>{{ p.emailId }}</td>
                <ng-container *ngFor="let m of p.products">
                   <td>{{m.dscr}}</td>
               </ng-container>
            </tr>
        </tbody>

       </table>
 I **expect output** to get also product information in my table: ![Firebase Database][1][Output Screen][2]
[1]: https://i.stack.imgur.com/BfHW0.jpg

Answer 1

要访问*ngFor中的嵌套列表，您需要执行以下操作：

<div *ngFor="let p of shippinglist">
    <div *ngFor="let m of p.products">
        <span>{{m.descr}}</span>
    </div>
</div>

重要的是，您从Firebase接收p.products作为对象，而不是列表，因此您需要修改getAllProducts ，

getAllProducts() {
    const x = this.shippingService.getshippings();
    x.snapshotChanges().subscribe(
      response => {
        response.forEach(element => {
          const product = element.payload.toJSON();
          let all_product = product as Billing;
          all_product.products = product["products"];
          let new_product_arr = [];
          for (var p in product["products"] as object) {
            let push_products = product["products"][p] as Products;
            new_product_arr.push(push_products);
          }
          all_product.products = new_product_arr;
          this.shippinglist.push(all_product);
        });
      }
    );
  }