Angular 如何更改选定索引上的颜色角度材质表中下拉列表的更改

在我的角度材质表中，有两个下拉列表，其OnChange方法的输出为是/否。现在，我想要的是，如果两个选择的索引都是否，那么所选索引的颜色将变为红色

以下是我的HTML：

      <ng-container matColumnDef="Eligible To Vote?">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Eligible To Vote? </mat-header-cell>
    <mat-cell *matCellDef="let element">
      <mat-form-field [class.app-input-no-underline]="true">
        <mat-select id="eligind" placeholder="Select" 
              (ngModelChange)="EligOnChange($event)" 
              [(value)]="element?.detail.Elig_Indc"
         [(ngModel)]="element?.detail.Elig_Indc">

         <mat-option>Select</mat-option>
          <mat-option value="1">Yes</mat-option>
          <mat-option value="0">No</mat-option>
        </mat-select>
      </mat-form-field>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Voting?">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Voting? </mat-header-cell>
    <mat-cell *matCellDef="let element">
      <mat-form-field [class.app-input-no-underline]="true">
        <mat-select id="voting" placeholder="Select" (ngModelChange)="VoteOnChange($event)" 
        [(value)]="element?.detail.Voting_Indc " 
        [(ngModel)]="element?.detail.Voting_Indc" name="voting" >
          <mat-option>Select</mat-option>
          <mat-option value="1" >Yes</mat-option>
          <mat-option  value="0">No</mat-option>
        </mat-select>
      </mat-form-field>
    </mat-cell>
  </ng-container>

现在，根据这两种方法的输出，我想将两个选定索引的颜色都更改为红色

如果两个选定索引的答案均为否：则文本将变为红色。这就是我想要的

请随时提问

提前感谢

编辑

---

使用

[ngClass]

将css类添加到两个索引中

在组件css中创建一个类

.red {
    color: red;
    [..]
}

使用

[ngClass]=“{'red'：bothInvalid}”

在任何需要应用样式的地方 在您的组件中有一个方法

get bothInvalid() {
    // true of both are false
    return !this.IsVoting && !this.EligibilityToVote;
}

---

使用

[ngClass]

将css类添加到两个索引中

在组件css中创建一个类

.red {
    color: red;
    [..]
}

使用

[ngClass]=“{'red'：bothInvalid}”

在任何需要应用样式的地方 在您的组件中有一个方法

get bothInvalid() {
    // true of both are false
    return !this.IsVoting && !this.EligibilityToVote;
}

---

您可以在这里利用ngClass指令

[ngClass]="getColor()"

在代码中，您可以动态地向其中添加css类，如下所示：

getColor() {

     let classes = {
      'red' : !this.IsVoting && !this.EligibilityToVote,
      'green' : !this.IsVoting && this.EligibilityToVote,
      'blue' : this.IsVoting && !this.EligibilityToVote,
       ...
     };

    return classes;
}

---

可以将单个或多个类作为一个true。值true将把类添加到DOM元素。

您可以在这里使用ngClass指令

[ngClass]="getColor()"

在代码中，您可以动态地向其中添加css类，如下所示：

getColor() {

     let classes = {
      'red' : !this.IsVoting && !this.EligibilityToVote,
      'green' : !this.IsVoting && this.EligibilityToVote,
      'blue' : this.IsVoting && !this.EligibilityToVote,
       ...
     };

    return classes;
}

---

---

可以将单个或多个类作为一个true。值true将把类添加到DOM元素。

在下拉列表中显示哪些数据？它是一个对象数组吗？您能显示该代码吗？`Select YesNo`这是htmlHow上的静态数据，您如何在组件中获取该数据。我需要看看code@DheerajKumarngModelChange侦听器用于将数据获取到组件中下拉列表中显示的数据是什么？它是一个对象数组吗？您能显示该代码吗？`Select YesNo`这是htmlHow上的静态数据，您如何在组件中获取该数据。我需要看看code@DheerajKumarngModelChange监听器用于将数据获取到componentIn中，我应该在material table中添加哪个标记

[ngClass]=“{'red'：bothInvalid}”

…这个特定的标记？我需要更改的类位于主样式文件中

.mat选择值文本{字体大小：13px！重要；颜色：#666666！重要；字体重量：打火机！重要；}

如何有条件地覆盖颜色？它取决于您希望颜色显示的位置？尝试将它应用到您显示的css类的使用位置，并同时使用！在您的

red

课程中很重要。目前还不能100%确定mat组件是否支持ngClass，否则可能会变得更加困难。否则创建一个stackblitz，这将使帮助变得更容易。它几乎类似于我应该在material table中添加标记的链接

[ngClass]=“{'red'：bothInvalid}”

…这个特定的标记？我需要更改的类在主样式文件中

.mat选择值文本{字体大小：13px！重要；颜色：#666666！重要；字体重量：打火机！重要；}

如何有条件地覆盖颜色？它取决于您希望颜色显示的位置？尝试将它应用到您显示的css类的使用位置，并同时使用！在您的

red

课程中很重要。目前还不能100%确定mat组件是否支持ngClass，否则可能会变得更加困难。否则创建一个stackblitz，这将使帮助更容易。它几乎类似于此链接