时间戳

首页 > 解决方案 > 角度材料 mat-cell 内容基于另一个 mat-cell 值而变化

angular - 角度材料 mat-cell 内容基于另一个 mat-cell 值而变化

问题描述

我在使用 mat-cell 值来显示基于另一个 mat-cell 内容的内容时遇到问题。我有一个状态为“就绪”、“失败”、“成功”的列，它是动态更新的。在另一个名为“Actions”的列上，它不是来自数据源。它只是当状态值为“成功”时显示按钮的 html，而当状态值为“失败”或“就绪”时不显示任何内容

我尝试使用 *ngIf 但似乎不起作用。

<ng-container matColumnDef="actions">
  <mat-header-cell mat-header-cell *matHeaderCellDef [ngClass]="'columnActions'">Actions
  </mat-header-cell>
  <mat-cell mat-cell *matCellDef="let element" class="small-text" [ngClass]="'columnActions'">
  <button *ngIf="columnStatus == 'SUCCESS'" mat-icon-button style="padding-right:0px; padding-left:10px"><mat-icon>done</mat-icon>
  <button *ngIf="columnStatus == 'FAILED'" mat-icon-button style="padding-right:0px; padding-left:10px"><mat-icon>clear</mat-icon>
</mat-cell>
</ng-container>

我希望当列“状态”单元格值为“成功”时，列“操作”单元格值显示为成功完成的不同图标和为失败清除的不同图标。列状态从 [dataSource] 动态更改工作文件。它是不会根据状态列中的值更改的操作列。

提前致谢

标签： angularangular-material

解决方案

我想代码在应该是 percolumnStatus == 'SUCCESS'的意义上是错误的，不是吗？此外，还有构造。所以应该是这样的；columnStatuselementif ... else

<mat-cell mat-cell *matCellDef="let element" class="small-text" [ngClass]="'columnActions'">
  <button *ngIf="element.columnStatus === 'SUCCESS'; else otherStatus" mat-icon-button style="padding-right:0px; padding-left:10px">
      <mat-icon>done</mat-icon>
  </button>
  <ng-template #otherStatus>
      <button mat-icon-button style="padding-right:0px; padding-left:10px">
         <mat-icon>clear</mat-icon>
      </button>
  </ng-template>
</mat-cell>

推荐阅读