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

Question

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

\n\n

模板

\n\n

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

\n

Answer 1

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