我使用的是Angular 2 (TypeScript)。
我想对新的选择做一些事情，但我在onChange()中得到的总是最后一个选择。我如何获得新的选择?
<select [(ngModel)]="selectedDevice" (change)="onChange($event)">
<option *ngFor="#i of devices">{{i}}</option>
</select>
onChange($event) {
console.log(this.selectedDevice);
// I want to do something here with the new selectedDevice, but what I
// get here is always the last selection, not the one I just selected.
}
当前回答
我在https://angular.io/docs/ts/latest/guide/forms.html上学习Angular 2表单教程(TypeScript版本)时遇到了这个问题
选择/选项块不允许通过选择其中一个选项来改变选择的值。
按照Mark Rajcok的建议去做是有效的，尽管我想知道在最初的教程中我是否遗漏了什么内容，或者是否有更新。在任何情况下，补充
onChange(newVal) {
this.model.power = newVal;
}
到HeroFormComponent类中的hero-form.component.ts
and
(change)="onChange($event.target.value)"
到her-form.com ponent.html中的<select>元素使其工作
其他回答
<mat-form-field>
<mat-select placeholder="Vacancies" [(ngModel)]="vacanciesSpinnerSelectedItem.code" (ngModelChange)="spinnerClick1($event)"
[ngModelOptions]="{standalone: true}" required>
<mat-option *ngFor="let spinnerValue of vacanciesSpinnerValues" [value]="spinnerValue?.code">{{spinnerValue.description}}</mat-option>
</mat-select>
我使用这个角材质下拉。工作正常
你可以通过在选择标签#device上创建一个引用变量来将值传递回组件，并将它传递给更改处理程序onChange($event, device.value)应该有新值
<select [(ng-model)]="selectedDevice" #device (change)="onChange($event, device.value)">
<option *ng-for="#i of devices">{{i}}</option>
</select>
onChange($event, deviceValue) {
console.log(deviceValue);
}
在angular 6及以上使用selectionChange。例子 (selectionChange) = onChange (event.value美元)
如果你不需要双向数据绑定:
<select (change)="updateSorting($event)">
<option disabled selected>Sorting</option>
<option value="pointDes">pointDes</option>
<option value="timeDes">timeDes</option>
<option value="timeAsc">timeAsc</option>
<option value="pointAsc">pointAsc</option>
</select>
updateSorting(e: any) {
// console.log((e.target as HTMLSelectElement)?.value); // also work
console.log(e.target.value);
}
我尝试了所有的建议，但没有一个对我有效。
想象一下这样的情况:您需要一个双向绑定，并且有一个带有NUMBER值的查找，您希望用这个查找的值填充SELECT并突出显示所选的选项。
使用[value]或(ngModelChange)是行不通的，因为在用户发起更改后，你将无法选择所选的选项:[value]将所有内容都视为字符串，至于(ngModelChange)——它显然不应该在用户发起更改时使用，因此它破坏了正确的选择。使用[ngModel]可以保证接收到的值的固定格式为INDEX: VALUE，并且很容易相应地解析它，然而，它再次破坏了所选的选项。
因此，我们使用[ngValue](它将负责正确的类型)，(change)和…[value]，这保证处理程序接收值，而不是一个显示的值或索引:value:)下面是我的工作笨拙的解决方案:
<select
class="browser-default custom-select"
(change)="onEdit($event.target.value)"
>
<option [value]="">{{
'::Licences:SelectLicence' | abpLocalization
}}</option>
<ng-container *ngIf="licencesLookupData$ | async">
<option
*ngFor="let l of licencesLookupData$ | async"
[ngValue]="l.id"
[value]="l.id"
[selected]="l.id == selected.id"
>
{{ l.id }} {{ l.displayName | defaultValue }}
</option>
</ng-container>
</select>
onEdit(idString: string) {
const id = Number(idString);
if (isNaN(id)) {
this.onAdd();
return;
}
this.licencesLoading = true;
this.licencesService
.getById(id)
.pipe(finalize(() => (this.licencesLoading = false)), takeUntil(this.destroy))
.subscribe((state: Licences.LicenceWithFlatProperties) => {
this.selected = state;
this.buildForm();
this.get();
});
}
