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>

当我从typescript更新ngModel绑定时，没有任何反应。基本上我只是在组件中执行此操作：

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

然而，没有任何反应。我试图更新它的值是在对象列表中（在* ngFor中） - 如果这很重要。

Answer 1

将([ngModel])="selectedValue"更改为[(ngModel)]="selectedValue"

就像docs说的那样：

在框中可视化香蕉，以记住括号在括号内。

如果您使用(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;
  }
}

Live demo

Answer 2

请将([ngModel])的定义更改为[(ngModel)]，您应该在objects对象
中分配值之前初始化selectedValue值

Angular 5：对select元素的ngModel绑定不会更新

2 个答案: