获取Angular中更改事件的选定选项值

Question

我正在使用 Angular 的响应式表单来提交表单数据。我希望能够从我的一个输入中访问选定的选项值，类似于我目前在提交表单时所做的那样。

(ngSubmit)="onSubmit(searchForm.value)"

注意过滤器数组：

但是，当我进行选择更改时，我无法获得相同的结果，因为 event.target.value 记录 3: Object

HTML：

<div class="col-md-2" *ngFor="let filter of this.filters; index as i" formArrayName="filters" >
          <div class="form-group">
            <select [formControlName]="i" (change)="onSelectChange($event.target.value)" size="5" class="form-control" multiple>
              <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
              <option
                *ngFor="let filterValue of this.filterValues[i].items"
                [ngValue]="{
                  filterHeader: { id: filter.id, value: filter.name },
                  filterSelections: { id: filterValue.id, value: filterValue.name }
                }">
                {{filterValue.name}}
              </option>
            </select>
          </div>
        </div>

我做错了什么？

Answer 1

我建议您将所选值存储在一个额外的变量中。并在您的模板中使用[(value)] 绑定，但目前我不确定这是否适用于本机选择。我将它与我的anuglar-material components 一起使用。

<select [formControlName]="i" (change)="onSelectChange($event.target.value)" size="5" class="form-control" multiple>
    <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
    <option
        *ngFor="let filterValue of this.filterValues[i].items"
        [ngValue]="{
            filterHeader: { id: filter.id, value: filter.name },
            filterSelections: { id: filterValue.id, value: filterValue.name }
        }">
      {{filterValue.name}}
    </option>
</select>

另一种解决方案是将[(ngModel)] 与(ngModelChange)="yourfunction" 一起使用，这个post 可能会有所帮助。

<select [(ngModel)]="selectedItem" (ngModelChange)="onChange($event)">

Answer 2

我设法将选定的选项值添加 (ngModelChange) 以选择元素并为选项添加 [ngValue]。也没有必要添加 [(ngModel)]。

<select [formControlName]="i" (ngModelChange)="onSelectChange($event)" size="5" class="form-control" multiple>
    <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
    <option *ngFor="let filterValue of this.filterValues[i].items" [ngValue]="filterValue">
        {{filterValue.name}}
    </option>
</select>