0

我正在使用一个表格组件，其中可以通过单击专用列中的星形图标将行标记/取消标记为收藏：

<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(row)返回 true，并且相应地更新图标。

反之亦然：单击收藏行的图标时，该行未标记为收藏，isFaved(row)返回 false 并更新图标。

我还有一个辅助用例，其中父组件可以更改行的收藏状态。

这也部分起作用：表格获取关于不喜欢哪一行的信息，并且表格组件中的知识被正确更新，因此isFaved(row)将返回正确的信息。

不幸的是，没有任何东西触发这个功能，因为没有点击收藏图标，所以图标错误地留在收藏状态，直到我手动刷新页面。

我该如何处理这种情况？有没有比启动虚拟点击事件更优雅的方法？

4

0 回答 0