使用行跨度动态呈现数据答案

【问题标题】：Render data dynamic with rowspan使用行跨度动态呈现数据
【发布时间】：2019-12-10 01:58:23
【问题描述】：

我正在尝试在角度项目中使用 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}
      ]
    }
  ]

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

谢谢

【问题讨论】：

请分享您到目前为止尝试过的代码

标签： javascript html angular html-table

【解决方案1】：

你想要做这样的事情。

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>

【讨论】：

【解决方案2】：

您可以使用以下逻辑：

<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。

【讨论】：

你应该在你的模板 div 周围加上另一个 inline-block 的 div，并使名称 div 也为 inline-block。这样，将彼此相邻，并且版本彼此之间。
现在它看起来像我的复制品：S
@Swoox：哈哈；不是真的！
@NicholasK 不知道为什么 stackblitz 会编译这个，但是如果你使用 tr，div 是不允许的，如果你使用 ng build--prod 这会破坏 btw。
@NicholasK 我喜欢你这样做的方式，有时这比计算行跨度更容易??

【解决方案3】：

试试这个：

<table border="1">
    <tr>
        <td>Application</td>
        <td>Version</td>
    </tr>
    <tr *ngFor="let item of list">
        <td>{{item.name}}</td>
        <td>
            <table>
                <tr *ngFor="let sub of item.templates">
                    <td>{{sub.version}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【讨论】：

谢谢，你有行跨度的解决方案吗，因为不推荐表内的表:)
我会看到并告诉你。同时你可以使用它:)

【解决方案4】：

一个简单的方法应该是这样的

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

【讨论】：

? 干得好，我的回答只是重塑数据并简化模板逻辑?
你可以先使用而不是索引它更像是一个propeate ??

【解决方案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 ??

【讨论】：