How do I get a new selection in & ldquo; Select & rdquo; In angular 2?

综合编程 2018-09-25 阅读原文

I am using Angular 2 (TypeScript).

I want to do something for new selection, but what I got in onChange() is always last selection. How can I get new selection?

    {{i}}


onChange($event) {
    console.log(this.selectedDevice);
    // I want to do something here for new selectedDevice, but what I
    // got here is always last selection, not the one I just select.
}

If you don't need two-way data-binding:

    {{i}}


onChange(deviceValue) {
    console.log(deviceValue);
}

For two-way data-binding, separate the event and property bindings:

    {{i}}
export class AppComponent {
  devices = 'one two three'.split(' ');
  selectedDevice = 'two';
  onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;
    // ... do other stuff here ...
}

If devices
is array of objects, bind to ngValue
instead of value
:

  {{i.name}}

{{selectedDeviceObj | json}}
export class AppComponent {
  deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
  selectedDeviceObj = this.deviceObjects[1];
  onChangeObj(newObj) {
    console.log(newObj);
    this.selectedDeviceObj = newObj;
    // ... do other stuff here ...
  }
}

Plunker
- does not use



Plunker
- uses


and uses the new forms API

Hello, buddy!

责编内容by:Hello, buddy!阅读原文】。感谢您的支持!

您可能感兴趣的

Angular路由——路由守卫 一、路由守卫 当用户满足一定条件才被允许 进入 或者 离开 一个路由。 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由。 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了...
It’s OK to Still Use Angular 1 in 2017 I saw an old friend over the weekend, who is a Director of Front End at a local start up. He asked me what framework we...
20 Best AngularJS Tools for Web Developers This article introduces you to 20 of the best AngularJS tools for web developers. Angular JavaScript allows you to...
Creating A Jump-To-Anchor Fragment Polyfill In Ang... On top of navigating from view-to-view, the Angular 5 Router provides a lot of advanced features like lazy-loading modu...
ngx-neditor 1.0.1 发布,更现代化的富文本编辑器 angular 组件... Angular 6.0正式版发布,都有哪些新功能 点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点...