更新：

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中的实际按钮，以便设置该图标以及仅该图标。有什么帮助或想法吗？

更新：

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

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

更好的是，我可以使用“展开”状态...如果可行，将发布解决方案。

Answer 1

我能够使用“扩展”变量来做到这一点：

    <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：Mat-icon按钮，而不是切换按钮的锚点

更新：

1 个答案: