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}
      ]
    }
  ]

我想像这样动态渲染数据

谢谢

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>

这是同样适用的stackblitz。

Answer 2

一个简单的方法，就像这样

<table style="border: 1px solid black">
  <tr>
     <th>Application</th>
     <th>Version</th>
  </tr>
  <ng-container *ngFor="let obj of list">
      <tr *ngFor="let entry of obj.templates;let i = index">
          <td [attr.rowspan]="obj.templates.length" *ngIf="i == 0">{{obj.name}}</td>
          <td>{{entry.version}}</td>
      </tr>
  </ng-container>
</table>

Answer 3

您正在寻找做这样的事情。

https://stackblitz.com/edit/angular-g4wfud

您只需要应用样式即可。

<table>
  <tr>
    <th>Application</th>
    <th>Version</th>
  </tr>
  <tr *ngFor="let listItem of list">
    <td style="vertical-align: top; border: 1px solid black">{{listItem.name}}</td>
    <td>
      <div *ngFor="let template of listItem.templates" style="border: 1px solid black">
        {{template.version}}
      </div>
    </td>
  <tr>
</table>

Answer 4

尝试一下：

foreach($images as $image) {                
   $xpl = explode('_', $image); 
   $newName = end($xpl);
}

Answer 5

这只是另一个替代答案，反而会使模板逻辑更难，我只是使用reduce来将数据映射到正确的结构。

组件

  tableData = []

  ngOnInit() {
      this.tableData = this.list.reduce((result,data) =>{
        const appName=data.name;
        const [first , ...items] = data.templates;

        result.push({appName ,rowSpan : data.templates.length ,version: first.version});
        result.push(...items.map(item=> ({version :item.version})));

        return result;
      },[]) 
  }

模板

<table>
    <tr>
        <th>Application</th>
        <th>Version</th>
    </tr>

    <tr *ngFor="let data of tableData">
        <td *ngIf="data.rowSpan" [rowSpan]="data.rowSpan">{{data.appName}}</td>
        <td>{{data.version}}</td>
    </tr>

</table>

demo ??

使用rowspan动态渲染数据

5 个答案: