Угловая таблица: как заставить обновление столбца на основе условий после изменения условия
Я работаю с компонентом таблицы, в котором строки можно пометить / пометить как избранные, щелкнув значок звездочки в выделенном столбце:
<table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows cellpadding="10">
...
<ng-container *ngIf="col.name === 'fav'" matColumnDef="fav">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<button mat-icon-button *ngIf="!isFaved(row)" (click)="favRow(row)"><mat-icon>star_border</mat-icon></button>
<button mat-icon-button *ngIf="isFaved(row)" (click)="unfavRow(row, false)"><mat-icon>star</mat-icon></button>
</td>
</ng-container>
...
</table>
Это работает отлично: при нажатии на значок строка помечается как избранная, isFaved(строка) возвращает значение true, а значок обновляется соответствующим образом.
То же самое работает наоборот: если щелкнуть значок строки избранного, строка не помечается как избранная, isFaved(строка) возвращает значение false, а значок обновляется.
У меня также есть вторичный вариант использования, в котором родительский компонент может изменить любимое состояние строки.
Это также работает частично: таблица получает информацию о том, какую строку удалять, и информация в компоненте таблицы корректно обновляется, поэтому isFaved(строка) будет возвращать правильную информацию.
К сожалению, ничто не вызывает эту функцию, так как не было щелчка по значку fav, поэтому значок неправильно оставлен в благоприятном состоянии, пока я не обновлю страницу вручную.
Как я могу справиться с этим делом? Есть ли что-то более элегантное, чем провоцирование фиктивного клика?