如何使用 Angular 中多个动态下拉列表中的选定值填充数组？答案

【问题标题】：How can I populate an array with selected values from multiple dynamic dropdownLists in Angular?如何使用 Angular 中多个动态下拉列表中的选定值填充数组？
【发布时间】：2021-03-29 23:49:46
【问题描述】：

我正在尝试使用从另一个数组动态生成的多个下拉列表中的所有选定值填充字符串数组。（exp：我有一个位置：字符串 [n]，我想构建 n 个下拉列表，每个下拉列表包含所有位置值，我可以从下拉列表中选择一些值来构建我的数组）。

这是我的 HTML

<div fxLayout="row wrap" gdColumns="repeat(auto-fit, minmax(240px, 1fr))" gdGap="10px"
                         class="zone-code-label" *ngFor="let _ of locations; index as index"
                         formArrayName="locationForm">
                        <mat-form-field appearance="outline" *ngFor="let _ of locationForm.controls; index as i">
                            <mat-label>{{'ASSET_CATALOG.FORM.FIELDS.LOCATION'| translate}}{{' '}}{{index + 1}}</mat-label>
                            <mat-select [formGroupName]="i"
                                        [placeholder]="'ASSET_CATALOG.FORM.FIELDS.LOCATION' | translate">
                                <mat-option>
                                    <ngx-mat-select-search formControlName="location"
                                                           [placeholderLabel]="'ASSET_CATALOG.FORM.CONFIG_LOCATION_SEARCH' | translate"
                                                           [noEntriesFoundLabel]="'ASSET_CATALOG.FORM.CONFIG_LOCATION_EMPTY' | translate"
                                    ></ngx-mat-select-search>
                                </mat-option>
                                <mat-option *ngFor="let item of filteredLocationList| async"
                                            [value]="!!item? item.code: ''">
                                    <span> {{item.code + ' - ' + item.label}}</span>
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>

这里是我的表单声明：

InitAssetCatalogForm(): void {
    this.assetCatalogForm.form = new FormGroup({
        code: new FormControl(null, [Validators.required]),
        label: new FormControl(null, [Validators.required]),
        price: new FormControl(null, [Validators.required]),
        measureUnit: new FormControl(null),
        supplier: new FormControl(''),
        ean: new FormControl(null, [Validators.required]),
        createdBy: new FormControl(null),
        createDate: new FormControl(null),
        nomenclature: new FormControl(null),
        duration: new FormControl(null),
        shelfLifeUnit: new FormControl(null),
        conditioning: new FormControl(null),
        weight: new FormControl(null),
        volume: new FormControl(null),
        minimumStock: new FormControl(null),
        height: new FormControl(null),
        length: new FormControl(null),
        width: new FormControl(null),
        ray: new FormControl(null),
        subRay: new FormControl(null),
        type: new FormControl(null),
        subType: new FormControl(null),
        segment: new FormControl(null),
        supplierCodeCtrl: new FormControl(null),
        conditioningCodeCtrl: new FormControl(null),
        measureUnitCodeCtrl: new FormControl(null),
        nomenclatureRayCodeCtrl: new FormControl(null),
        nomenclatureSubRayCodeCtrl: new FormControl(null),
        nomenclatureTypeCodeCtrl: new FormControl(null),
        nomenclatureSubTypeCodeCtrl: new FormControl(null),
        nomenclatureSegmentCodeCtrl: new FormControl(null),
        locationForm: new FormArray([
            new FormGroup({
                location: new FormControl(null)
            })
        ])
    });

正如您在此处看到的，我的数组在提交后通常为空，并且不采用选定的值。

问题在于 formcontrol 和 FormArray。

请帮忙！

谢谢。

【问题讨论】：

标签： angular angular-material formarray

【解决方案1】：

你可以使用 (selectionChange) 函数来触发一个事件，在那里你可以做任何你想做的事情，包括推送到一个数组。这也适用于多个标签。

第一个垫选择....

<mat-select (selectionChange)="addItem($event.value)" multiple>
 <mat-option *ngFor="let item of items" [value]="item.value">
 {{item.value}}
  </mat-option>
  </mat-select>

第二个垫选择....

 <mat-select (selectionChange)="addItem($event.value)" >
        <mat-option *ngFor="let s of something" [value]="s.value">
          {{s.value}}
        </mat-option>
      </mat-select>

打字稿

ngOnInit(): void {
this.selectedItems=[];
}

 addItem(item:any){
   this.selectedItems.push(item);
 }

不用说，您还必须处理未选择的项目，但这取决于您如何删除它。

【讨论】：