根据选择

时间:2018-06-04 10:57:28

标签: angular typescript angular-material

我有一个通过角度材料met-select创建的下拉列表,其中一个对象被填充。

这是我的对象

[
  {Id: 0101, name: "324356667_INR_BOSTON_CITY"}
  {Id: 0102, name: "324356667_INR_BOSTON_CITY"}
  {Id: 0103, name: "324356667_USD_BOSTON_CITY"}
  {Id: 0104, name: "424356688_USD_BOSTON_CITY"}
  {Id: 0105, name: "224356699_INR_BOSTON_CITY"}
]

这是我遇到的选择下拉列表

<mat-form-field>
  <mat-select
      (change)="changeVal($event.value)" 
      placeholder="Projects"
      [formControl]="toppings"
      multiple required>
    <mat-option
        *ngFor="let p of nproj; let p = index;"
        [value]="p" [class.pclass]="disabled">
      {{p.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

在我的CSS中,我这样写了

.pclass {       颜色:#ddd!important;     }

以下是我的.ts文件

changeVal(pval) {    
  for (let p of pval) {     
    var pval_array = p.name.split("_");      
  }
  for (let item of this.nproj) {
    var res_array = item.name.split("_");
    if (pval_array==res_array) {             
      this.disabled=false;              
    } else {            
      this.disabled=true;                
    }        
}

要求是,如果有人从下拉列表中选择值,则_之前的字符将与下拉项目的其余部分(_之前的字符)进行比较 。如果匹配找到的项目将突出显示或休息将被禁用。 在我的示例中,如果我选择第一个下拉元素,则应禁用最后两个下拉元素。

0 个答案:

没有答案