如何在 Angular 中使用数组设置多个下拉字段。此外，当从一个下拉字段中选择一个选项时，不得影响另一个字段

Question

如何在 Angular 中使用数组设置多个下拉字段。此外，当从一个下拉字段中选择一个选项时，另一个字段和所选选项将不会显示在它的输入框中。

我尝试了很多来实现它，但不是运气。我还附上了代码。如果您有更好的理解，请查看并修复它。

https://stackblitz.com/edit/angular-qfpxmy?file=src%2Fapp%2Fapp.component.ts

Answer 1

你的代码有错误，想法是 show/change filter.formField[ind]。因此，您应该使用 [ngModel]="filter.formFiend[ind] 而不是 [(ngModel)]="filter.formField"（必须使用“bannana notation”或（NgModelChange），因为单击选项时会更改值。

<div class="row" *ngFor="let item of dropdownsArr; let ind = index;">
  ...
<!--the [(NgModel)]="filter.formField" becomes like-->
  <input ...[ngModel]="filter.formField[ind]" 
      (click)="dropdownFieldStatus(ind, $event)">
  <ul class="dropdown filter-priority open" *ngIf="showDropDown[ind]">
      ...
  </ul>
</div>

此外，您的函数 onSelectOption 应该为 this.filter.formField[ind]

赋值

onSelectOption(ind: number, index: number, bugClass: any): void {
    this.selectedOptionIndex[ind] = index;
    this.filter.formField[ind] = bugClass.title;
  }

如何在 Angular 中使用数组设置多个下拉字段。此外，当从一个下拉字段中选择一个选项时，不得影响另一个字段

How to set many dropdown fields using array in Angular. Also, when choose an option from one dropdown field must not effect another field

forms

arrays

dropdown

angular