typescript - Angular 2'de seçilen açılır menü seçeneğini devre dışı bırakma?

TS DOSYASI

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>

Açıklama: İlk açılır menüyü seçtiğimde, o değer ikinci, üçüncü ve dördüncü açılır menüde devre dışı kalıyor! Her açılır menü için değer benzersiz olmalı. Değer her açılır menüde aynı olmamalı! (selectionchange) veya (ngModelChange) olaylarının kullanımı var mı? Şimdiden teşekkürler

işte benim stackblitz'im - https://stackblitz.com/edit/on-change-selection?file=app%2Fselect-overview-example.html

Cevap #1

HTML'de ::

<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'de değişiklik olayında ::

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

Umarım bu senin için işe yarar!

Cevap #2

Zaten seçilmiş verileri filtreleyen bir boru oluşturabilirsiniz.

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

Ve sonra bunu *ngFor içinde kullanın

<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>

Demo: https://stackblitz.com/edit/on-change-selection-yb4tgq