Отключить выбранный вариант раскрывающегося меню угловой 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>

Объяснение: когда я выбираю Первый раскрывающийся список, это значение отключается в раскрывающихся списках два, три и четыре! за каждый выпадающий список, который должен иметь уникальную ценность. значение не должно быть одинаковым в каждом раскрывающемся списке! есть ли какие-либо события (selectionchange) или (ngModelChange)? заранее спасибо

вот он мой стек-блиц - https://stackblitz.com/edit/on-change-selection?file=app%2Fselect-overview-example.html

Answer 1

Вы можете создать канал, который фильтрует уже выбранные данные.

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({
  name: 'cityFilter',
  pure: false
})
export class CityFilterPipe implements PipeTransform {
  transform(items: any[], selectedItems: any[]): any {
    return items.filter(item => selectedItems.indexOf(item) < 0);
  }
}

А затем используйте его в *ngFor

<form #myForm="ngForm">
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectOne" name="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">
                <mat-option *ngFor="let time2 of resData.data | cityFilter:[selectOne]" [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 | cityFilter:[selectOne,selectTwo]" [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| cityFilter:[selectOne,selectTwo, selectThree]" [value]="time4">{{time4}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
<form>

Демо: https://stackblitz.com/edit/on-change-selection-yb4tgq

Answer 2

В 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);
}

Надеюсь, это сработает для вас!