Угловая таблица: как заставить обновление столбца на основе условий после изменения условия

Я работаю с компонентом таблицы, в котором строки можно пометить / пометить как избранные, щелкнув значок звездочки в выделенном столбце:

<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, поэтому значок неправильно оставлен в благоприятном состоянии, пока я не обновлю страницу вручную.

Как я могу справиться с этим делом? Есть ли что-то более элегантное, чем провоцирование фиктивного клика?

0 ответов

Другие вопросы по тегам