Angular 16：如何用ngIf避免ngFor重复渲染已迭代项

问题分析 #

当前代码内层*ngFor遍历每个refRaw下的rafale数组时，每一行都会生成PEÇA EM BRUTO列的<td>，导致该数量被重复渲染。正确逻辑应为：每个refRaw对应的所有rafale行共享同一个PEÇA EM BRUTO单元格，通过rowspan合并行，仅在第一行渲染该单元格。

解决方案 #

通过在内层循环中添加索引判断，仅在第一个rafale项所在行渲染PEÇA EM BRUTO的<td>，同时保留rowspan属性覆盖所有对应行。此外补充完成其他列（PEÇA BRANCA、PEÇA NEGRA、PEÇA ACABADA）的渲染逻辑，从rafale.refs中匹配对应类型的数据。

修改后的HTML代码 #

<div class="container">
  <table class="table table-responsive mt-5 caption-top">
    <caption></caption>
    <thead class="align-middle table-group-divider">
      <tr>
        <th class="text-center" scope="col">IDENTIFICAÇÃO PEÇA</th>
        <th class="text-center" scope="col">PEÇA EM BRUTO</th>
        <th class="text-center" scope="col">PEÇA BRANCA</th>
        <th class="text-center" scope="col">PEÇA NEGRA</th>
        <th class="text-center" scope="col">PEÇA ACABADA</th>
      </tr>
    </thead>
    <tbody class="table-group-divider">
      <ng-container *ngFor="let refRaw of tableMongoData">
        <tr *ngFor="let rafale of refRaw.rafale; let i = index">
          <th class="text-center" scope="row">{{ rafale.name }}</th>
          <!-- 仅在第一个rafale行渲染PEÇA EM BRUTO单元格 -->
          <td
            *ngIf="i === 0"
            [attr.rowspan]="refRaw.rowspan"
            class="text-center align-middle"
            tabindex="0"
            data-html="true"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            [attr.data-bs-title]="'Referência: ' + refRaw.ref"
          >
            {{ refRaw.partQty }}
          </td>
          <!-- 渲染PEÇA BRANCA（匹配type为PB的ref） -->
          <td class="text-center align-middle">
            {{ rafale.refs.find(item => item.type === 'PB')?.partQty || '-' }}
          </td>
          <!-- 渲染PEÇA NEGRA（匹配type为PN的ref） -->
          <td class="text-center align-middle">
            {{ rafale.refs.find(item => item.type === 'PN')?.partQty || '-' }}
          </td>
          <!-- 渲染PEÇA ACABADA（匹配type为PA的ref） -->
          <td class="text-center align-middle">
            {{ rafale.refs.find(item => item.type === 'PA')?.partQty || '-' }}
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

关键修改点说明 #

1. 添加索引判断：在内层*ngFor中加入let i = index，通过*ngIf="i === 0"控制PEÇA EM BRUTO的<td>仅在第一个rafale行渲染，避免重复。
2. 完善tooltip内容：将data-bs-title绑定为'Referência: ' + refRaw.ref，补充参考编号信息。
3. 补充其他列渲染：使用Array.find()从rafale.refs中匹配对应类型（PB/PN/PA）的数量，确保每列数据正确显示，未找到则显示-作为占位符。

效果验证 #

修改后，每个refRaw的PEÇA EM BRUTO数量仅显示一次，通过rowspan覆盖该refRaw下所有rafale对应的行，表格结构符合预期，数据渲染准确。

内容的提问来源于stack exchange，提问作者Anton Fedak