[英]Remove selected option from second mat-select which was from first mat-select
我有 3 個 mat-select mat-form-field 以及每個 mat-select 的輸入字段容器。 其中三個 mat-select 填充了來自同一數組的數據。 我的目標是從墊選擇中選擇的其他兩個墊選擇中刪除一個項目。 我怎樣才能做到這一點? 只有一個 api 我必須得到陣列。 在 mat-select 中沒有關於 selectionChange 的請求。
.html
<div class="input_left_container">
<mat-label>{{ "Target Slab 01" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select (ngModelChange)="getSlabPrice1($event)" formControlName="target_slab_1" (selectionChange)="removeTargetSlab($event.value)">
<mat-option *ngFor="let target of target_slab" [value]="target">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive1" placeholder="{{ 'Pay/task' | translate }}" value="{{ this.price1 }}" maxlength="40">
</mat-form-field>
</div>
<div class="input_left_container">
<mat-label>{{ "Target Slab 02" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select formControlName="target_slab_2" (ngModelChange)="getSlabPrice2($event)" (selectionChange)="removeTargetSlab($event.value)">
<mat-option *ngFor="let target of target_slab" [value]="target">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive2" placeholder="{{ 'Pay/task' | translate }}" value="{{ this.price2 }}" maxlength="40">
</mat-form-field>
</div>
<div class="input_left_container">
<mat-label>{{ "Target Slab 03" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select formControlName="target_slab_3" (ngModelChange)="getSlabPrice3($event)" (selectionChange)="removeTargetSlab($event.value)">
<mat-option *ngFor="let target of target_slab" [value]="target">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive3" placeholder="{{ 'Pay/task' | translate }}" value="{{ this.price3 }}" maxlength="40">
</mat-form-field>
</div>
.ts
// LIST TARGET SLAB
getTargetSlab() {
this.riderservice.getTargetSlab().subscribe((res) => {
this.target_slab = res["success"].data;
});
}
// FUNCTION TO REMOVE SELECTED TARGET PLAN
removeTargetSlab(e) {
this.target_slab = this.target_slab.filter((item) => item !== e);
}
// GET SLAB PRICE
getSlabPrice1(event) {
this.target_slab_id1 =event.id;
this.price1 = event.price;
}
// GET SLAB PRICE
getSlabPrice2(event) {
this.target_slab_id2 = event.id;
this.price2 = event.price;
}
// GET SLAB PRICE
getSlabPrice3(event) {
this.target_slab_id3 = event.id;
this.price3 = event.price;
}
服務.ts
// LIST TARGET SLAB
getTargetSlab() {
return this.http.get(`${this.apiUrl}listTargetSlab/`);
}
我假設您使用form
作為 FormGroup
private _ngUnsubscribe = new Subject();
private target_slab = [];
public form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
target_slab_1: new FormControl(),
incentive1: new FormControl(),
target_slab_2: new FormControl(),
incentive2: new FormControl(),
target_slab_3: new FormControl(),
incentive3: new FormControl(),
});
[1, 2, 3].forEach(index => {
this.form.controls[`target_slab_${index}`].valueChanges
.pipe(
takeUntil(this._ngUnsubscribe)
)
.subscribe(value => {
const item = this.target_slab.find(item => item.id === +value);
this.form.controls[`incentive${index}`].setValue(item ? item.price : '');
});
});
}
get targetSlab1Options() {
return this.target_slab.filter(item => item.id !== +this.form.controls.target_slab_2.value && item.id !== +this.form.controls.target_slab_3.value);
}
get targetSlab2Options() {
return this.target_slab.filter(item => item.id !== +this.form.controls.target_slab_1.value && item.id !== +this.form.controls.target_slab_3.value);
}
get targetSlab3Options() {
return this.target_slab.filter(item => item.id !== +this.form.controls.target_slab_1.value && item.id !== +this.form.controls.target_slab_2.value);
}
getTargetSlab() {
this.riderservice.getTargetSlab().subscribe((res) => {
this.target_slab = res["success"].data;
});
}
<div class="input_left_container">
<mat-label>{{ "Target Slab 01" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select formControlName="target_slab_1">
<mat-option *ngFor="let target of targetSlab1Options" [value]="target.id">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive1" placeholder="{{ 'Pay/task' | translate }}" maxlength="40">
</mat-form-field>
</div>
<div class="input_left_container">
<mat-label>{{ "Target Slab 02" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select formControlName="target_slab_2">
<mat-option *ngFor="let target of targetSlab2Options" [value]="target.id">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive2" placeholder="{{ 'Pay/task' | translate }}" maxlength="40">
</mat-form-field>
</div>
<div class="input_left_container">
<mat-label>{{ "Target Slab 03" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select formControlName="target_slab_3">
<mat-option *ngFor="let target of targetSlab3Options" [value]="target.id">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive3" placeholder="{{ 'Pay/task' | translate }}" maxlength="40">
</mat-form-field>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.