角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"

就像文檔說的那樣：

可視化框中的香蕉，以記住括號放在括號內。

另外，如果您使用的是ngModel則不需要(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;
  }
}

現場演示

Answer 2

請將([ngModel])的定義更改為[(ngModel)]並且應在初始化selectedValue對象中的值之前初始化objects值