Angular Добавление атрибута метки данных к элементу td

Question

Я хочу добавить атрибут data-label к каждому элементу td, чтобы сделать таблицу Отзывчивой.Он всегда должен быть правильно переведен в соответствии с языком пользователя, поэтому я хочу взять его из переменных 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] для использования динамических атрибутов в угловых значениях, поэтому в вашем случае: [attr.data-label]="HALBTAGE".