时间戳

首页 > 解决方案 > ngx-datatable：mat-icon 按钮而不是切换按钮的锚点

angular - ngx-datatable：mat-icon 按钮而不是切换按钮的锚点

问题描述

我正在使用 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>

我尝试了以下（用按钮替换锚点）：

   <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>

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

标签： angularangular-materialngx-datatable

解决方案

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

    <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>

推荐阅读