Angular 将数据标签属性添加到 td 元素

Question

我想将属性 data-label 添加到每个 td 元素以使 table 响应。它必须始终根据用户语言正确翻译，所以我想从 th 变量中获取它。

模板

<div class="p-3" *erzLet="state.entries$ | async as entries">
  <ng-container *ngIf="!(state.loading$ | async); else loading">
    <ng-container *ngIf="entries && entries.length > 0; else noEntries">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">
              {{ 'evaluate-absences.list.header.student' | translate }}
            </th>
            <th>{{ 'evaluate-absences.list.header.total' | translate }}</th>
            <th>
              {{ 'evaluate-absences.list.header.valid-excuse' | translate }}
            </th>
            <th>
              {{ 'evaluate-absences.list.header.without-excuse' | translate }}
            </th>
            <th>
              {{ 'evaluate-absences.list.header.unconfirmed' | translate }}
            </th>
            <th>{{ 'evaluate-absences.list.header.late' | translate }}</th>
            <th>{{ 'evaluate-absences.list.header.halfday' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let entry of entries">
            <td data-label={{ 'evaluate-absences.list.header.student' | translate }}>{{ entry.StudentFullName }}</td>
            <td data-label="TOTAL">{{ entry.TotalAbsences }}</td>
            <td data-label="ENTSCHULDIGT">
              {{ entry.TotalAbsencesValidExcuse }}
            </td>
            <td data-label="UNENTSCHULDIGT">{{ entry.TotalAbsencesWithoutExcuse }}</td>
            <td data-label="OFFEN">{{ entry.TotalAbsencesUnconfirmed }}</td>
            <td data-label="VERSPÄTUNG">{{ entry.TotalIncidents }}</td>
            <td data-label="HALBTAGE">{{ entry.TotalHalfDays }}</td>
          </tr>
        </tbody>
      </table>
    </ng-container>
    <ng-template #noEntries>
      <p>{{ 'evaluate-absences.no-entries' | translate }}</p>
    </ng-template>
  </ng-container>
  <ng-template #loading>
    <erz-spinner></erz-spinner>
  </ng-template>
</div>

Answer 1

您可以使用 [attr.ATTRIBUTENAME] 在 angular 中使用动态属性，因此在您的情况下：[attr.data-label]="HALBTAGE".

Angular 将数据标签属性添加到 td 元素

Angular Add data-label attribut to td element

angular2-template

angular