Question

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

以下是我的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>

以下是下拉列表的OnChange代码：

EligOnChange($event, element) {
 if ($event !== 0) {
   this.EligibilityToVote = false;
  } else {
     this.EligibilityToVote = true;
  }
  return this.EligibilityToVote;
  }

 `VoteOnChange($event, element) {
      if ($event !== 0) {
      this.IsVoting = false;
        } else {
       this.IsVoting = true;
      }
     return this.IsVoting;
   }`

现在，根据两种方法的输出，我想将所选索引的颜色更改为RED

如果所选索引的答案均为NO：那么文本将变为红色。这就是我想要的全部

请随时提出任何问题

提前致谢

修改

stackblitz URL

Answer 1

使用[ngClass]向两个索引添加css类。

在组件css中创建一个类

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

在您想要应用样式的地方使用[ngClass]="{'red': bothInvalid}" 在你的组件中有一个方法

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

Answer 2

您可以在此处使用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元素。

如何更改角度材料表内下拉列表的选定索引更改的颜色

2 个答案: