Таблица материалов Angular - как обновить заголовок столбца существующей таблицы?

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

До:

введите здесь описание изображения

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

введите здесь описание изображения

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

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

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


typescript angular angular-material angular-material-table
person Andrew    schedule 30.01.2019    source источник
comment
Закомментировал this.columnsToDisplay = []; и setTimeout() в предоставленном вами примере stackblitz, и он работал нормально.   -  person GCSDC    schedule 31.01.2019
comment
Моя беда, вчера вечером я внес изменения в stackblitz, не разобрав его. Вернемся к демонстрации проблемы.   -  person Andrew    schedule 31.01.2019
comment
Я сделал так, что вместо свойства id для обоих наборов данных у них были id1 и id2. Это позволяет правильно обновлять все, но на практике оба моих набора данных будут иметь одно и то же свойство id, поэтому это не сработает.   -  person Andrew    schedule 31.01.2019

Ответы (1)


arrow_upward
6
arrow_downward

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

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

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

Для этого включите trackBy в свой шаблон:

<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>

Include function trackByIndex on your component ts file:

trackByIndex(i) { return i; }

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

person GCSDC    schedule 01.02.2019
comment
Это очень интересно, как это работает. Я полностью думал, что воссоздание конфигураций с новыми ссылками на объекты приведет к обновлению заголовков, поэтому я даже не подумал попробовать trackBy. Спасибо, что нашли время ответить, очень признательны! - person Andrew; 01.02.2019