[英]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.