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

Posted 2023-02-22

【中文标题】角度材料 mat-cell 内容基于另一个 mat-cell 值而变化

【英文标题】：Angular material mat-cell content changes based on another mat-cell value

【发布时间】：2019-09-01 04:19:52

【问题描述】：

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

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

提前致谢

【问题讨论】：

也添加你的 ts 和 class 文件。

【参考方案1】：

我认为代码columnStatus == 'SUCCESS' 是错误的，因为columnStatus 应该是element，不是吗？此外，还有if ... 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>