当状态在ag-grid angular中处于活动状态或不活动状态时如何更改图标答案

【问题标题】：how to change the icon when the status is active or not active in ag-grid angular当状态在ag-grid angular中处于活动状态或不活动状态时如何更改图标
【发布时间】：2020-11-03 07:48:24
【问题描述】：

HTML*

   <ng-template #actionButtons let-data="data">
      <div class="cell-actions">
        <a href="javascript:;" (click)="assign()">
          <i nz-icon nzType="user-add" nzTheme="outline"></i>
        </a>
    
        <i nz-icon nzType="user-delete" nzTheme="outline"></i>
      </div>
    </ng-template>

  ngOnInit() {
    this.getData();
  }

  onGridReady(event: any) {
    this.columnDefs = this.colParser.parseConfigColumnDefs(this.columnDefs, this.actionButtons);
  }

  getData() {
    this.assets.getAll({ start: 1, length: 999, type: this.data.assetType.code }).pipe(take(1)).subscribe((res: any) => {
      res.data.map((data: any) => {
        this.row$.push({
          id: data.id,
          status: data.status
        });
      });

      this.rowData$.next(this.row$,);
    })
  }

  assign() {
    
  }

当状态为 ACTIVE 时，我在这里尝试执行的操作将显示此 ，但状态为 NOTACTIVE 它应显示此  而不是 。

【问题讨论】：

标签： javascript angular typescript ag-grid

【解决方案1】：

您可以在列中使用valueFormatter根据状态显示图标：

 { headerName: 'Status', field: 'status', valueFormatter: statusFormatter }

function statusFormatter(params) {
  return params.value==='ACTIVE'? '<i nz-icon nzType="user-add" nzTheme="outline"></i>' : '<i nz-icon nzType="user-delete" nzTheme="outline"></i>';
}

【讨论】：