angular - 禁用选定的下拉选项 Angular 2？

Question

TS 文件

import { Component, ViewChild } from '@angular/core';


/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})


export class SelectOverviewExample {
  resData = {
    "data": ["Pune", "Mumbai", "Pimpari", "Nagpur", "Hydrabad", "Assam", "Karnataka", "Bihar", "Maharashtra", "Delhi", "Srinagar", "Shimla", "Goa",  "Rajasthan", "MP", "Aandhra-Pradesh"]
  }
  selectOne : string ='';
  selectTwo='';
  selectThree='';
  selectFour='';
  one='';

   @ViewChild('select2') _select2: any
   firstSelections: string = '';

//    setFirstValues(form) {
//      this.firstSelections = form.value.select1
//      if (this._select2.value) {
//        const secondSelectionsValues = this._select2.value.slice();
//        for (var i = secondSelectionsValues.length - 1; i >= 0; i--) {
//          if (this.firstSelections.includes(secondSelectionsValues[i])) {
//              secondSelectionsValues.splice(i, 1)
//            this._select2.writeValue(secondSelectionsValues);
//          }
//        }
// }
// }


onChanged(){
  this.resData.data.forEach(ele =>{
if(ele == this.selectOne)
this.selectTwo !== this.selectOne;
  })
  }
}

HTML

<form #myForm="ngForm">


  <div class="col-md-4">
<mat-form-field >
    <mat-select [(ngModel)]="selectOne" name="selectOne" (selectionChange)="onChanged()">
        <mat-option *ngFor="let time1 of resData.data" value="time1" >{{time1}}</mat-option>
    </mat-select>
</mat-form-field>
  </div>

<div class="col-md-4">
    <mat-form-field >
        <mat-select [(ngModel)]="selectTwo"  name="selectTwo"  (selectionChange)="onChanged()">
            <mat-option *ngFor="let time2 of resData.data" value="time2"  >{{time2}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select  [(ngModel)]="selectThree" name="selectThree">
            <mat-option *ngFor="let time3 of resData.data" value="time3" >{{time3}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select [(ngModel)]="selectFour" name="selectFour">
            <mat-option *ngFor="let time4 of resData.data" value="time4" >{{time4}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<form>

说明:当我选择“第一个”下拉列表时，该值在下拉列表“二”、“三”和“四”中被禁用!对于每一个下降，我都必须有一个独特的值(value)。每个下拉列表中的值不应该相同! 是否有使用 (selectionchange) 或 (ngModelChange) 事件？ 提前致谢

这是我的 stackblitz - https://stackblitz.com/edit/on-change-selection?file=app%2Fselect-overview-example.html

Answer 1

在 HTML 中::

<form #myForm="ngForm">


  <div class="col-md-4">
<mat-form-field >
    <mat-select [(ngModel)]="selectOne" name="selectOne" (selectionChange)="onChanged(selectOne)">
        <mat-option *ngFor="let time1 of resData.data" [value]="time1" >{{time1}}</mat-option>
    </mat-select>
</mat-form-field>
  </div>

<div class="col-md-4">
    <mat-form-field >
        <mat-select [(ngModel)]="selectTwo"  name="selectTwo"  (selectionChange)="onChanged(selectTwo)">
            <mat-option *ngFor="let time2 of resData.data" [value]="time2"  >{{time2}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select  [(ngModel)]="selectThree" name="selectThree">
            <mat-option *ngFor="let time3 of resData.data" [value]="time3" >{{time3}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select [(ngModel)]="selectFour" name="selectFour">
            <mat-option *ngFor="let time4 of resData.data" [value]="time4" >{{time4}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<form>

在 TS 中发生更改事件::

onChanged(event){
  console.log(this.resData.data[0]);
this.resData.data = this.resData.data.filter(ele => ele !== event);
console.log(this.resData);
}

希望这对您有用!