javascript - 使用行跨度动态呈现数据

Question

我正在尝试在 Angular 项目中使用ngFor和rowspan呈现表格 ，这是我的数据：

 list = [
    {
      name: "app1",
      templates:[
        { name: "temp1", version: 1}
      ]
    },
        {
      name: "app2",
      templates:[
        { name: "temp1", version: 1},
        { name: "temp1", version: 2},
        { name: "temp1", version: 3}
      ]
    },
        {
      name: "app3",
      templates:[
        { name: "temp1", version: 1},
         { name: "temp1", version: 2}
      ]
    }
  ]

我想像这样动态呈现这些数据

谢谢

标签： javascripthtmlangularhtml-table

Answer 1

您可以使用以下逻辑：

<table style="border: 1px solid black">
    <tr>
        <th>Application</th>
        <th>Version</th>
    </tr>
    <tr *ngFor="let obj of list">
        <td style="border: 1px solid black">{{obj.name}}</td>
        <td>
            <div *ngFor="let entry of obj.templates" style="border: 1px solid black; padding: 2px; margin: 2px">
                {{entry.version}}
            </div>
        </td>
    </tr>
</table>

这是一个相同的工作堆栈闪电战。