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

【问题标题】：How to change color on selected index change of dropdown inside angular material table如何更改角度材料表内下拉列表的选定索引更改的颜色
【发布时间】：2018-04-20 16:11:44
【问题描述】：

在我的角度材料表中有两个下拉列表，其 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;
   }`

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

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

请随时提出任何问题

提前致谢

编辑

stackblitz URL

【问题讨论】：

您在下拉列表中显示什么数据？它是一个对象数组吗？你能显示那个代码吗？
` 选择是否`
是html上的静态数据
如何在组件中获取数据。我需要看那个代码
@DheerajKumar ngModelChange 监听器用于将数据获取到组件中

标签： angular typescript angular-material2

【解决方案1】：

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

在你的组件 css 中创建一个类

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

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

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

【讨论】：

我应该在材料表的哪个标签中添加[ngClass]="{'red': bothInvalid}"...这个特定的标签？
我需要更改的类在主样式文件中...mat-select-value-text { font-size: 13px!important; color: #666666!important; font-weight: lighter!important; }
如何有条件地覆盖颜色？
这取决于您希望颜色显示在哪里？尝试将它应用到您展示的 css 类的使用位置，并在您的 red 类中使用 !important。目前还不能 100% 确定 mat 组件是否支持 ngClass，否则可能会变得更加困难。否则创建一个堆栈闪电战，这将使帮助更容易。
和这个链接link几乎相似

【解决方案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 会将类添加到 DOM 元素中。

【讨论】：