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

Question

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>

TS

  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 时，我在这里尝试执行此操作，<i nz-icon nzType="user-add" nzTheme="outline"></i>但状态为 NOTACTIVE 它应该显示 this<i nz-icon nzType="user-delete" nzTheme="outline"></i>而不是<i nz-icon nzType="user-add" nzTheme="outline"></i>.

标签： javascriptangulartypescriptag-grid

Answer 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>';
}