Angular 5：选择元素上的 ngModel 绑定不会更新

Question

我有一个选择元素的标记：

<select type="submit" ([ngModel])="selectedValue" #item (change)="onSelectItem(item.value)">
                <option>Pick an option</option>
                <option *ngFor="let object of objects">{{ object.value }}</option>
</select>

当我从打字稿更新 ngModel 绑定时，没有任何反应。本质上我只是在组件中这样做：

ngOnInit() {
  this.selectedValue = 'something' // One of the options from the list of objects
}

然而，什么也没有发生。我尝试将其更新为的值位于对象列表中（在 *ngFor 中） - 如果这很重要的话。

Answer 1

改成([ngModel])="selectedValue"​[(ngModel)]="selectedValue"

就像文档所说：

想象盒子里有一根香蕉，记住括号位于方括号内。

(change)如果您使用的是，您也不需要侦听器ngModel。您可以将双向绑定分为[ngModel]和(ngModelChange)

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <select type="submit" [ngModel]="selectedValue" (ngModelChange)="onSelectedChange($event)">
    <option *ngFor="let option of options">{{ option }}</option>
  </select>

  {{ selectedValue }}
  ` ,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedValue = 1;
  options = [1,2,3]

  onSelectedChange(value: number) {
    // do something else with the value
    console.log(value);

    // remember to update the selectedValue
    this.selectedValue = value;
  }
}

现场演示