选择后从下拉列表中删除所选选项 [英] Remove selected option from dropdown after select

问题描述

我有一个场景，如果有来自 API 的任何数据，我需要在视图中显示带有选定值或默认值的下拉列表.我可以使用添加按钮添加新的下拉菜单.但是我只需要从下拉列表中选择一次值，这样就不会重复了.

I have a scenario that i need to show dropdowns with selected or default values in view if there is any data from API. And i can add new dropdowns using add button. But i have to select value from drop downs only once so it will not repeated.

我正在使用 ngFor 循环来显示此下拉列表，并且我正在使用 splice 方法从下拉列表中删除选定的选项.我在这里面临一个问题

I am using ngFor loop to show this drop downs and i am using splice method to remove selected options from drop down. And i am facing a issue here that

示例:如果我从第 1 个下拉列表 1 和第 2 个下拉列表中选择汽车 1，我看不到汽车 1，但是如果我再次去下拉列表 1 并将该选项更改为汽车 2，
在下拉列表 2 中，我看不到 car 1 和 car 2 选项，因为 splice 从该数组中删除了这些选项.

Example: If i select car 1 from 1st drop down 1 and the 2nd drop down i can not see car 1 but if i go again to drop down 1 and change that option to car 2,
in drop down 2 i cannot see car 1 and car 2 options because splice deleting those option from that array.

<mat-select required formControlName="productTypeCode"

(selectionChange)="selectType($event.value)">
              <mat-option>Select</mat-option>
              <mat-option *ngFor="let type of newarrayvalues"
                          [value]="type.code">
                {{type.name}}
              </mat-option>
            </mat-select>

PriorExperience -> form array for this dropdowns

  for (let i = 0; i < this.InvestmentTypes.length; i++) {
        for (let j = 0; j < this.PriorExperience.controls.length; j++) {
          if (this.InvestmentTypes[i].code == this.financialDetailsForm.value.piExperience[j].productTypeCode) {
           // this.removedValues.push(this.newarrayvalues[i])
            this.InvestmentTypes.splice(i, 1);
          }
        }

我只需要删除选定的值，如果我更改了应该只从该数组中删除的任何下拉值

I need to remove only selected values and if i change any dropdown value that should only removed from that array

请帮我解决这个问题.

推荐答案

您只需要使用过滤器功能删除该元素，然后再次使用表单组分配给表单.这解决了我的问题，希望这对你也有用.

You just need to remove that element using filter function and again assign to Form using Form group. this solve my problem hope this work for you too.

<mat-form-field class="form-field-width pr-2">
    <mat-select placeholder="Artist" formControlName="artist" multiple>
        <mat-option class="cls-2" *ngFor="let artist of artists" [value]="artist._id">{{
            artist.artistName
        }}</mat-option>
    </mat-select>
</mat-form-field>


removeArtist(type: string){
    if (type === 'artist') {
        this.filterForm.value.artist = this.filterForm.value.artist.filter((stl: string) => stl !== chip._id);
    }
    this.filterForm = this.fb.group({
        artist: [this.filterForm.value.artist, null],
    });
}

这篇关于选择后从下拉列表中删除所选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！