Html 嵌套*ngFor from对象和对象列表

我在名为

companys

的组件中有一个属性：

公司：公司[]；

每家公司都有一份

产品列表

：

出口类公司{
id:number；//我自己的类
名称：字符串；
产品：产品[]=[]；//公司有产品
//产品和公司是不同的对象
}

但是当我用

产品
检索数据（
公司
）时，
产品
列表没有类型（
产品
现在是
对象
）

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


{{company.name}
{{product.name}

但是，我在控制台中得到一个错误：

错误类型错误：无法读取未定义的属性“products”

公司列表显示ok，但公司中没有相关产品

我的问题是，如何正确地为
*ngFor
编码，以便在我的组件模板中获得这些产品（与公司相关）？
让产品成为公司的产品

编辑

对不起，我没有注意到第二个ngFor不在外部ngFor下。
我不完全精通棱角材料，但我会很快看一看，让你知道我是否有一个好的解决方案给你

编辑

您希望将ngFor放在mat扩展面板中，而不是放在mat扩展面板标题中。然后让公司的产品。产品
您需要嵌套
*ngFor
s<代码>公司
是一个数组，没有
产品
属性，但
公司
有。请注意，我将第一个
*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>


{{company.name}
{{product.name}
由于每家公司都有产品，您必须在公司级别列出产品。然后需要嵌套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>


{{company.name}
{{product.name}

这种方法的其他替代方法可以是：


将这些产品整合到各个公司自己的列表中
选择一个公司，然后显示所选公司的产品
对不起，没用。还没有定义。我没有记下你的答案，idk谁做的不用担心，有些人会这么做：-）我已经更新了我的答案如果你不想失去代表，只需删除itOr，当看到我的编辑确实回答了问题时，更新下一票？哈哈。谢谢。我已经在这里潜伏了很长时间，最后决定发布一段时间，但感觉有点。。。怀有敌意的我想人们真的在叫嚷着要代言