Angular Material Table - Как обновить заголовок столбца существующей таблицы?

Question

Я использую Angular 7, и у меня есть простой компонент с Angular Material Table .Через какое-то событие, скажем щелчком мыши, я хочу иметь возможность обновлять как данные, так и заголовок этой существующей таблицы.

До:

После (цель):

В настоящее время я получаю данные для обновления в порядке.Тем не менее, я не могу получить текст заголовка столбцов для обновления, если только я не делаю довольно ненадежный вызов тайм-аута окна.

Это сложно описать, поэтому stackblitz repo должно помочь.В файле «table-dynamic-columns.example.ts», который я там связал, у меня есть две разные стратегии, которые я пробую на обработчике нажатия кнопки «changeColumnHeader».Похоже, что для того, чтобы отобразить заголовок моего нового заголовка столбца, мне нужно сначала очистить отображаемые столбцы таблицы, а затем правильно установить их обратно в течение времени ожидания.Возможно, это не работает, потому что имя свойства остается тем же самым (то есть 'id'), и изменяется только название.

Кто-нибудь знает лучший способ заставить это корректно обновляться?

Answer 1

Возможно, это не работает, потому что имя свойства остается неизменным (то есть 'id') и изменяется только заголовок.

Это причина того, что оно не обновляется, как объяснено в этом комментарий

В том же комментарии есть предлагаемое решение, которое вы можете использовать (добавьте функцию trackBy).

Для этого включите trackBy в свойtemplate:

<ng-container [matColumnDef]="config.property" *ngFor="let config of configs; trackBy: trackByIndex">
<th mat-header-cell *matHeaderCellDef> {{config.name}} </th>
<td mat-cell *matCellDef="let element"> {{element[config.property]}} </td>

Включите функцию trackByIndex в файл ts вашего компонента:

trackByIndex(i) { return i; }

Разделили предоставленный вами стек, и он работает здесь