如何从angular 7中ngfor对象的循环包含数组中填充表数据

在Angular 7中，可以使用ngFor指令来循环遍历对象中的数组，并将数据填充到表格中。以下是一个完善且全面的答案：

ngFor是Angular中的一个结构指令，用于循环遍历数组或对象，并生成相应的HTML元素。在使用ngFor时，需要提供一个可迭代的数据源，可以是数组、对象或迭代器。对于对象，ngFor会遍历对象的属性，并将每个属性的值作为循环变量。

对于循环包含数组的对象，可以使用嵌套的ngFor指令来实现。首先，使用外层的ngFor指令遍历对象，然后在内层使用ngFor指令遍历数组。在内层的ngFor指令中，可以使用嵌套的模板变量来访问对象和数组的属性。

以下是一个示例代码，演示如何从Angular 7中的ngFor对象的循环中填充表格数据：

在组件的HTML模板中：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td>{{ item.name }}</td>
      <td>
        <ul>
          <li *ngFor="let price of item.prices">{{ price }}</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

在组件的Typescript文件中：

export class MyComponent {
  items = [
    {
      name: '商品1',
      prices: [10, 20, 30]
    },
    {
      name: '商品2',
      prices: [15, 25, 35]
    }
  ];
}

在上述示例中，items是一个包含两个对象的数组。每个对象都有一个name属性和一个prices属性，prices属性是一个数组。通过使用ngFor指令，我们可以将items数组中的每个对象填充到表格的每一行，并将每个对象的name属性和prices属性填充到表格的对应列中。

对于腾讯云相关产品和产品介绍链接地址，可以根据具体需求选择适合的云计算产品，例如：