Нужно изменить цвет строки в зависимости от статуса в ANGULAR 4

Question

У меня есть 6 столбцов, т. Е. Имя, адрес электронной почты, телефон, компания, status_1 и status_2.

status_1 имеет две опции, т. Е. "1" или "0" status_2 также имеет две опции, т. Е... "1" или "0"

Мои требования: Мне нужно изменить цвет строки

Логика:

    if(status_1 is "1" -> change to red)
    else if (status_2 is "1" -> change to green)
    else if (status_1 and status_2 is "1" -> give priority to status_1)

Мой код:

    <div>
      <mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
          <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="email">
          <mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
          <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="phone">
          <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
          <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="company">
          <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
          <mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
    </div>

Я покажу 4 столбца, и цвет строки должен быть изменен в соответствии со статусом

, пожалуйста, помогите мне

спасибо.

Answer 1

Внести следующие изменения

html

изменить mat-row как

<mat-row *matRowDef="let row; columns: displayedColumns;" [ngStyle]="{'background-color': getRowColor(row)}"></mat-row>

ts

getRowColor(row){
  if (row.status_1 === '1') {
    return "red";
  } else if (row.status_2 === '1') {
    return "green";
  }
}

Answer 2

Вам необходимо использовать [ngStyle], чтобы указать ваши условия.Предполагая, что весь список, который вы дали, является вашей строкой, добавьте директиву к вашему внешнему <div>, например так:

<div [ngStyle]="{ 'background-color': status_1 === '1' ? 'red' : (status_2 === '1' ? 'green' : 'auto') }">
  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="phone">
      <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

Я бы сказал, что выражение должно быть в функции, которая будет лучше читать ипроще в обслуживании.Учитывая

getColor() {
  if (status_1 === '1') {
    return 'red';
  } else if (status_2 === '1') {
    return 'green';
  }
}

Вы можете изменить <div> на использование:

<div [ngStyle]="{ 'background-color': getColor() }">