Question

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

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

示例：如果我从第一个下拉菜单1和第二个下拉菜单中选择了汽车1，我看不到汽车1，但是如果我再次下拉下拉菜单1并将该选项更改为汽车2，
在下拉菜单2中，我看不到car 1和car 2选项，因为拼接从该阵列中删除了这些选项。

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

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

请帮助我。

Answer 1

您的问题是他们正在共享相同的数据。

如果您是我，我将创建一个将数组值作为 @Input 的组件。然后在该组件中放入删除选项的逻辑。然后，在父组件中，将使用foorLoop渲染已创建的组件。

Answer 2

因为拼接从该阵列中删除了这些选项。

不要拼接实际对象

使用可用数据创建Array of objects，对象应类似于

{value: " yourValue", selected: "booleanValue" }

如果在任何下拉列表中选择了该值，只需将boolean更改为true。

<mat-select required formControlName="productTypeCode"
    (selectionChange)="selectType($event.value)">
        <mat-option>Select</mat-option>
        <ng-container *ngFor="let type of newarrayvalues">
            <mat-option *ngIf="type.selected"
                          [value]="type.value">
            {{type.value}}
        </ng-container>
 </mat-select>

Answer 3

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

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

选择

3 个答案: