Html 需要根据ANGULAR 4中的状态更改行的颜色

我有6个专栏。。姓名、电子邮件、电话、公司、状态_1和状态_2

状态_1有两个选项，即。。“1”或“0” 状态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>

名称
{{user.name}
电子邮件
{{user.email}
电话
{{user.phone}
单位
{{user.company.name}

我将显示4列，行的颜色应根据状态进行更改

请帮帮我

---

谢谢。

您需要使用

[ngStyle]

来指定您的条件。假设您给出的整个列表是您的行，将指令添加到最外层的

，如下所示：

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

您可以将

更改为使用：

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

---

您需要使用

[ngStyle]

来指定您的条件。假设您给出的整个列表是您的行，将指令添加到最外层的

，如下所示：

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

您可以将

更改为使用：

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

进行以下更改 html 将垫行更改为

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

进行以下更改 html 将垫行更改为

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

---

谢谢你的恐吓回复，兄弟！这个答案与我非常吻合。我需要把ngstyle而不是div放到。非常感谢你，兄弟。谢谢你的恐吓回复，兄弟！这个答案与我非常吻合。我需要把ngstyle而不是div放到。非常感谢你，兄弟。