Блог

У меня возникла проблема со значением мат-ячейки для отображения содержимого на основе другого содержимого мат-ячейки. У меня есть столбец со статусом «готово», «сбой», «успех», который обновляется динамически. В другом столбце с именем «Действия», и он не из источника данных. Это просто 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>
  

Я ожидаю, что когда значение ячейки столбца «Статус» равно «УСПЕХ», значение ячейки столбца «Действие» будет отображать другой значок, выполненный для успеха, и очистить для сбоя. Динамическое изменение состояния столбца работает с файлом из [источника данных]. Это действие столбца, которое не изменится на основе значения в столбце состояния.

заранее спасибо

Я полагаю, что код columnStatus == 'SUCCESS' неверен в том смысле, что columnStatus он должен быть per element , не так ли? Кроме того, существует if ... else construct . Так что это должно быть так;

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