设置一个select框后双向绑定丢失

Question

我有 2 个 select 框，设置其中一个应该将第二个设置为 0。

HTML

<select [(ngModel)]="testVar" (ngModelChange)="testFunc($event)">
  <option value="0">no</option>
  <option value="1">yes</option>
  <option value="2">maybe</option>
</select>

<select [(ngModel)]="testVar2" (ngModelChange)="testFunc($event)">
  <option value="0">no</option>
  <option value="1">yes</option>
  <option value="2">maybe</option>
</select>

组件

  testVar = 0;
  testVar2 = 1;

  testFunc(){
    this.testVar2 = 0;
    console.log(this.testVar2);
  }

这在第一次点击页面并更改任一框时工作正常，但在将第二个 select 设置回 1 后，双向绑定丢失。控制台日志似乎表明模型正在更新，但 select 框没有响应。我错过了什么？

plunkr

Answer 1

通过将您的第二个 select 框从

更改为我设法获得了所需的行为

<select [(ngModel)]="testVar2" (ngModelChange)="testFunc($event)">
 <option value="0">no</option>
 <option value="1">yes</option>
 <option value="2">maybe</option>
</select>

至

<select [(ngModel)]="testVar2">
 <option value="0">no</option>
 <option value="1">yes</option>
 <option value="2">maybe</option>
</select>

我不是 100% 知道为什么它至少不强制第二个值始终为 0，但我可以告诉你，你的初始绑定是错误的。 [(ngModel)]（Banana in a box syntax）由两部分组成。

[ngModel] 表示您将组件中的值绑定到 html。因此，例如，如果您以编程方式更新变量，它将反映在您的 HTML/Child 组件中。
(ngModel) 意味着您传递给 ngModel 的值将绑定到 HTML/component 对其所做的任何更改。

结合使用这两者，我们创建了双向绑定。您的组件将更新任何使用值的子 component/html，而 html/component 将在更改值时更新您的组件。但是，当您还指定 (ngModelChange)="testFunc($event)" 时，您将用自己的回调绑定覆盖。删除它会修复您的代码。

希望这有帮助，如果有人知道为什么 testFunc 并不总是使 testVar2 的值为 0，请发表评论，我想知道。

Answer 2

您的应用程序组件中的小改动。调用 testFunc 时传递值并在函数内设置值。

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-app',
  template: `
    <select [(ngModel)]="testVar" (ngModelChange)="testFunc($event, 0)"> //Change
      <option [ngValue]="0">no</option>
      <option [ngValue]="1">yes</option>
      <option [ngValue]="2">maybe</option>
    </select>

    <select [(ngModel)]="testVar2" (ngModelChange)="testFunc(0, $event)"> //Change
      <option [ngValue]="0">no</option>
      <option [ngValue]="1">yes</option>
      <option [ngValue]="2">maybe</option>
    </select>
  `,
})
export class App {
  name:string;
  testVar: number = 0;
  testVar2: number = 1;
  constructor() {}
  testFunc(val: number, val1: number){  //Change
     this.testVar = val;
     this.testVar2 = val1;
  }
 }
}

@NgModule({
imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 3

找到解决方案here。诀窍是在 prior 函数中调用 ChangeDetectorRef.detectChanges() 来重置值。

但是请注意，它需要同时使用 [(ngModel)] 和 (ngModelChange)...只是不要问我为什么 XD

Working plunkr

设置一个select框后双向绑定丢失

Two-way binding is lost after setting a select box

angular

two-way-binding