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

【问题标题】：Angular 5: ngModel binding on select element doesn't updateAngular 5：选择元素上的 ngModel 绑定不会更新
【发布时间】：2023-03-06 22:40:01
【问题描述】：

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

<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 中）——如果这很重要的话。

【问题讨论】：

查看我的编辑，了解有关[ngModel] 和(ngModelChange) 的更多信息。

标签： html angular html-select

【解决方案1】：

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

就像docs 说的：

在一个盒子里想象一根香蕉，记住括号放在括号内。

如果你使用ngModel，你也不需要(change)监听器。您可以将两种方式的绑定拆分为[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

【讨论】：

使用模板引用变量而不是传递整个事件，Passing $event is a dubious practice
在这种情况下，$event 是一个 Angular 事件。不是 DOM 事件。这只是一个数字。所以你的链接不适用。它与 @Output 装饰器发出的任何其他事件没有什么不同。
感谢信息:)
另外，请记住将FormsModule 导入到您的模块中，以便您可以使用[(ngModel)] 指令。

【解决方案2】：

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

【讨论】：

它与其他答案有何不同？
不是，他只是抄的。