Question

我在名为companies的组件中有一个属性：

companies: Company[];

每家公司都有products的列表：

export class Company {
  id: number; //my own class
  name: string;

  products: Product[] = []; //company have products
                            //Product is a diffrent object like Company
}

但是当我检索数据（company和products）时，products列表没有类型（Product现在是Object）。

在组件的模板中，我想创建一个嵌套的*ngFor，如下所示：

<mat-expansion-panel>
  <mat-expansion-panel-header
    *ngFor="let company of companies"
  >
    <mat-panel-title>{{ company.name }}</mat-panel-title>
  </mat-expansion-panel-header>
  <mat-selection-list>
    <mat-list-item *ngFor="let product of companies.products">
      {{ product.name }}
    </mat-list-item>
  </mat-selection-list>
</mat-expansion-panel>

但是，控制台出现错误：

错误TypeError：无法读取未定义的属性“产品”

公司列表显示正常，但公司中没有相关产品。

我的问题是，如何正确编码*ngFor才能在组件模板中获取那些（与公司相关的）产品？

Answer 1

您需要嵌套*ngFor。 companies是一个数组，没有products属性，但是company有。并且请注意，我将第一个*ngFor从面板标题标签移到了面板标签。

<mat-expansion-panel *ngFor="let company of companies">

     <mat-expansion-panel-header>
        <mat-panel-title>{{ company.name }}</mat-panel-title>
     </mat-expansion-panel-header>

    <mat-selection-list>
       <mat-list-item *ngFor="let product of company.products">
          {{ product.name }}
       </mat-list-item>
    </mat-selection-list>

</mat-expansion-panel>

Answer 2

由于每个公司都有产品，因此必须在公司级别列出产品。然后需要嵌套HTML，以便company在检索产品时具有作用域。

<mat-expansion-panel *ngFor="let company of companies">

  <mat-expansion-panel-header>
    <mat-panel-title>{{ company.name }}</mat-panel-title>
  </mat-expansion-panel-header>

  <mat-selection-list>
    <mat-list-item *ngFor="let product of company.products">
      {{ product.name }}
    </mat-list-item>
  </mat-selection-list> 

</mat-expansion-panel>

此方法的其他替代方法可能是：

将产品统一到各个公司自己的列表中。
选择一个公司，然后显示所选公司的产品

Answer 3

let company.products产品

编辑

抱歉，我没有注意到第二个ngFor不在外部ngFor之下。我对角材料并不完全精通，但是我会快速地看一下，并告诉您是否有适合您的解决方案

编辑

您想将ngFor放在mat-expansion-panel中，而不是在mat-expansion-panel标头中。然后让company.products的产品

从对象嵌套* ngFor到对象列表

3 个答案: