ngx-datatable：垫图标按钮而不是切换按钮的锚点

Question

我正在使用 ngx-datatable

我有一列带有图标向右箭头和图标向下箭头以展开每行的详细信息。
当前代码如下：

<ngx-datatable ...

<ngx-datatable-column 
[width]="60" 
[resizeable]="false" 
[sortable]="false" 
[draggable]="false" 
[canAutoResize]="false">
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
    <a href="javascript:void(0)" style="text-decoration: none;" [class.datatable-icon-right]="!expanded" [class.datatable-icon-down]="expanded"
      title="Expand/Collapse Row" (click)="toggleExpandRow(row)">
    </a>
  </ng-template>
</ngx-datatable-column>

</ngx-datatabe>

单击锚标记时，锚标记所在的行会展开，而所有其他标记保持关闭。这是正确的行为。
我想使用带有展开和关闭图标的 Angular Material 图标按钮来代替锚标记。

我尝试了以下方法（将锚点替换为按钮）：

   <button mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>{{expandIcon}}</mat-icon></button>

在我的 .ts 中我这样做：

 toggleExpandRow(row){
    if(environment.debug){
      console.log("toggleExpandRow(row, $event) Called", row);
    }
    if(this.expandToggle){
      this.expandIcon = 'expand_more';
      this.expandToggle=false;
    }else{
      this.expandIcon = 'chevron_right';
      this.expandToggle=true;
    }

但是当我点击某一行的按钮时，所有行的图标都变成展开的。我怎样才能做到只有我点击的那一行有展开的按钮？似乎我需要以某种方式访问 DOM 中被单击的实际按钮以设置该图标，并且只有 icon.Any 帮助或想法？

更新：

我意识到我可以获得被点击的行索引。然后我可以有一个 matIcons:string[] 的数组，并使用行 ID 索引到该数组以更新每个行图标。谁有更好的方法？

 <ng-template let-rowIndex="rowIndex" let-row="row" let-expanded="expanded" ngx-datatable-cell-template>

更好的是，我可以只使用 "expanded" 状态...如果可行，将 post 解决方案。

Answer 1

我可以用 "expanded" 变量做到这一点：

    <button *ngIf="expanded" mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>expand_more</mat-icon></button>
    <button *ngIf="!expanded" mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>chevron_right</mat-icon></button>

ngx-datatable：垫图标按钮而不是切换按钮的锚点

ngx-datatable: mat-icon button instead of anchor for toggle button

angular-material

ngx-datatable

angular

更新：