【发布时间】：2020-10-30 20:37:48
【问题描述】：
我有 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;
}
service.ts
// LIST TARGET SLAB
getTargetSlab() {
return this.http.get(`${this.apiUrl}listTargetSlab/`);
}
【问题讨论】：
-
您是否尝试过为您的 3 个下拉菜单使用 3 个不同的
target_slab数组。您对所有下拉列表使用相同的数组。过滤原始数组后，所选项目从所有 3 个下拉列表中消失。 -
您不过滤原始数组。您只过滤分配给下拉列表的数组。例如 - 假设您有
target_slab1,target_slab2,target_slab3数组。如果您选择第一个下拉列表，则从target_slab2,target_slab3中删除该选定值。 -
我发现了另一个问题。当我选择一个值时，它会从另一个值中删除，但如果再次更改相同的选项，这两个值都会从另一个选项中删除。有什么解决办法吗？
-
你的FormGroup在这里用了什么？