Question

我有一个用户列表。每个用户都是一个复合对象：{ id: '123', name: 'Bob', State: 'Colorado' }

我使用* ngFor：

渲染这些用户

<div *ngFor="let u in users">
    {{ u.name }}
    <select [(ngModel)]="u.state">
       <option *ngFor="let s in states" [value]="s">{{s}}</option>
    </select>
</div>

当select-value更改时 - 我想通过REST API保存对象。

我尝试添加(change)="changeState(u)"，但这不起作用，显然在u.state回调执行后(change)正在更新。

如果我没有循环，我会给我的下拉列表一个参考：#state，然后使用(change)="changeState(u, state.value)"

我唯一的选择是使用$event.target.value吗？或者有一种更明智的方式来做到这一点？该解决方案也会带走验证。

前两个解决方案中的任何一个是否可以挽救？

Answer 1

您可以将ngModelChange事件与ngModel：

分开

<select [ngModel]="u.state" (ngModelChange)="changeState($event)">
       <option *ngFor="let s in states" [value]="s">{{s}}</option>
</select>

然后新的选择值将直接传递给changeState()。

Answer 2

如果您正在使用，那么您可以使用

<强> HTML

<div *ngFor="let u in users">
    {{ u.name }}
    <select formControlName="dropdown" (change)="modelChange($event)">
       <option *ngFor="let s in states" [value]="s">{{s}}</option>
    </select>
</div>

<强> TS

modelChange(event){
console.log(event.target.value);
}

Answer 3

在我的情况下，我使用的(ngModeChange)="changeState($event)"可以很好地工作，但是在某些情况下，对Rest API的调用将花费无限的时间，因此该问题的另一种解决方案是我更改了(ngModeChange) to (selectChange)可以很好地工作< / p>

如何检测下拉元素列表中的更改？

3 个答案: