使用行跨度动态呈现数据

Posted 2023-03-05

【中文标题】使用行跨度动态呈现数据

【英文标题】：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
      ]
    
  ]

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

谢谢

【问题讨论】：

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

【参考方案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 ??