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() {
    
  }

在状态为“活动”时我要在此处执行的操作将显示此，但状态为“不活动”时应显示此而不是。

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

在ag-grid angular中如何激活状态或不激活状态时如何更改图标

1 个答案: