Question

我无法使用Mat-Cell值来显示基于另一个Mat-Cell内容的内容。我有一列状态为“就绪”，“失败”，“成功”的状态会动态更新。在另一个名为“ Actions”的列上，它不是来自dataSource。只是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]中提取文件。这是“操作”列，不会根据“状态”列中的值而更改。

预先感谢

Answer 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>

角材料Mat-Cell的内容根据另一个Mat-Cell的值而变化

1 个答案: