Rowspan 在角度 10 中无法与 ngFor 一起正常工作答案

【问题标题】：Rowspan is not working properly with ngFor in angular 10Rowspan 在角度 10 中无法与 ngFor 一起正常工作
【发布时间】：2021-07-27 18:21:20
【问题描述】：

我有一个从 json 填充数据的表，我必须使用 Rowspan 正确映射数据。 Rowspan 仅使用单个值。当我使用带有静态表的行跨度时，它很好，但是当它进入循环时，它不能正常运行。我已经评论了静态表代码。下面是代码https://stackblitz.com/edit/angular-haubxs?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<table class="table table-bordered">
  <thead>
    <tr>
      <td colspan="4" class="text-center">
        Document Audit Trail
      </td>
    </tr>
    <tr>
      <th rowspan="3">Certificate Number</th>
      <th>Document Version</th>
      <th>Issued on</th>
      <th>Cancelled on</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of data">
      <td rowspan="3" style="vertical-align:middle;">AZ12Q289</td>
      <td>{{item.versionNo}}</td>
      <td>{{item.issuedOn}}</td>

    </tr>
  </tbody>
</table>
<!--<table class="table table-bordered">
    <thead>
      <tr>
        <td colspan="4" class="text-center">
          Document Audit Trail
        </td>
      </tr>
      <tr>
        <th rowspan="3">Certificate Number</th>
        <th>Document Version</th>
        <th>Issued on</th>
        <th>Cancelled on</th>
      </tr>
    </thead>
    <tbody>
      
      <tr>
        <td rowspan="3" style="vertical-align:middle;">AZ12Q289</td>
        <td>Version 1</td>
        <td>19/5/2021 09:28</td>
        <td>22/5/2021 15:28</td>
      </tr>
      <tr>
 
        <td>Version 2</td>
        <td>22/5/2021 15:30</td>
        <td>28/5/2021 19:12</td>
        
      </tr>
      <tr>

        <td>Version 3</td>
        <td>22/5/2021 15:30</td>
        <td>-</td>
        
      </tr>
      
    </tbody>
  </table> -->

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  data = [
    {
      versionNo: '1',
      issuedOn: '07/Jul/2021 11:15',
      
    },
    {
      versionNo: '2',
      issuedOn: '07/Jul/2021 11:15',
     
    }
  ];
}

【问题讨论】：

标签： angular

【解决方案1】：

这是因为您要在每个 <tr> 中添加带有行跨度的 <td>，而不仅仅是在第一个中。

所以，第一个跨越第一列的两行，所以下一个跨越第二列的两行（因为第一列已经被占用），等等。

所以，你会想要：

rowspan 取决于数据中的行数
让您的 <td> 与 rowspan 仅出现一次，用于您的数组中的第一项。

为此，您可以简单地检查数组的索引和长度，如下所示：

<tbody>
    <tr *ngFor="let item of data; let index = index;">
      <td *ngIf="index === 0" [attr.rowspan]="data.length" style="vertical-align:middle;">AZ12Q289</td>
      <td>{{item.versionNo}}</td>
      <td>{{item.issuedOn}}</td>
    </tr>
  </tbody>

这里是forked stackblitz，它适用于动态行数。

【讨论】：