0

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

零件

  testVar = 0;
  testVar2 = 1;

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

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

plunkr

4

3 回答 3

1

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

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

工作笨拙

于 2017-11-09T21:09:10.367 回答
0

您的应用程序组件中的小改动。在调用 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 {}
于 2017-11-09T16:56:13.103 回答
0

我设法通过更改您的第二个选择框来获得所需的行为

<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，我不是 100%，但我可以告诉你，你的初始绑定是错误的。（[(ngModel)]Banana in a box syntax）由两部分组成。

  • [ngModel]意味着您将组件中的值绑定到 html。因此，例如，如果您以编程方式更新变量，它将反映在您的 HTML/Child 组件中。

  • (ngModel)意味着您传递 ngModel 的值将绑定到 HTML/组件对其所做的任何更改。

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

希望这会有所帮助，如果有人知道为什么 testFunc 并不总是将 testVar2 的值设为 0，请在我想知道的情况下发表评论。

于 2017-11-09T16:28:29.547 回答