Question

我有2个选择框，设置任何一个应该将第二个设置为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>

COMPONENT

  testVar = 0;
  testVar2 = 1;

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

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

plunkr

Answer 1

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

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

Working plunkr

Answer 2

我设法通过更改

中的第二个选择框来获得所需的行为

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

我不是百分之百为什么它至少不会强制第二个值始终为0，但我可以告诉你，你的初始绑定是错误的。 [(ngModel)]（盒子语法中的香蕉）由两件事构成。

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

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

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

Answer 3

您的应用组件中的小变化。调用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 {}

设置选择框后，双向绑定将丢失

3 个答案: