如何在 Select 标签(Angular 2)上检测对 ngModel 的更改

import {Component, View, Input, } from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'my-dropdown'
})
@View({
    directives: [FORM_DIRECTIVES],
    template: `
        <select [ngModel]="selection" (ngModelChange)="onChange($event, selection)" >
            <option *ngFor="#option of options">{{option}}</option>
        </select>
        {{selection}}
    `
})
export class MyDropdown {
    @Input() options;

    selection = 'Dog';

    ngOnInit() {
        console.log('These were the options passed in: ' + this.options);
  }

  onChange(event) {
    if (this.selection === event) return;
    this.selection = event;
    console.log(this.selection);
  }

}

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

onChange(newValue) {
    console.log(newValue);
    this.selectedItem = newValue;  // don't forget to update the model here
    // ... do other stuff here ...
}

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

<select [(ngModel)]="selectedItem" #item (change)="onChange(item.value)">

Angular相关问答推荐

我希望在下一次有Angular 的HTTPS呼叫之前完成一次

如何以条件为值管理ngIf内部的未定义值？

如何在服务器端获取具有angular 17 ssr的查询参数？

angular：从模板中的可观察数组获取随机元素

Angular 16路卫单元测试可观察到的SpyObj属性

如何在Angular 17中使用Angular—calendum？

Angular 17自定义指令渲染不起作用'

如何在Angular 17 SSR中处理Swiper 11 Web组件事件

如何确保[共享]组件是真正的哑组件？(Angular )

弯管记忆

如何在AngularJs中剪断细绳

Angular 16模块中未使用的组件是否从Bundle 包中删除(树摇动)？

一次重定向后，所有子路由都处于活动状态

由于ngcc操作失败，Angular扩展可能无法正常工作

NX如何在前端和后端使用一个接口库

Angular 迁移 14 到 15 / 16：angular universal 是否停止将 <！-- this page was prerendered with angular universal --> 用于预渲染页面？

怎样在 Angular 2 或 4 中将输入字段设为只读？

Angular 2 Material Design 组件是否支持布局指令？

Angular 2 filter/search 列表

为什么 Angular 项目中没有 Angular-CLI 为 model生成命令？