Двусторонняя привязка теряется после установки поля выбора

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>

СОСТАВНАЯ ЧАСТЬ

  testVar = 0;
  testVar2 = 1;

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

Это прекрасно работает при первом попадании на страницу и изменении любого поля, но после установки второго выбора обратно на 1 двусторонняя привязка теряется. Журнал консоли, похоже, указывает на то, что модель обновляется, но поле выбора не отвечает. Что мне не хватает?

plunkr

Answer 1

Нашел решение здесь. Трюк должен был позвонить ChangeDetectorRef.detectChanges() в функции до сброса значения.

Обратите внимание, однако, что необходимо использовать оба [(ngModel)] а также (ngModelChange)... только не спрашивайте меня, почему XD

Рабочий планкр

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>

Я не на 100% уверен, почему второе значение не было, по крайней мере, всегда равным 0, но я могу сказать, что ваша первоначальная привязка неверна. [(ngModel)] (Банан в коробке синтаксиса) состоит из двух вещей.

• [ngModel] Означает, что вы связываете значение из вашего компонента с HTML. Так, например, если вы программно обновите переменную, она будет отражена в вашем компоненте HTML/Child.

• (ngModel) Означает, что значение, которое вы передаете ngModel, будет привязано к любым изменениям, которые HTML / компонент вносит в него.

Используя их вместе, мы создаем двустороннюю привязку. Ваш компонент обновит любой дочерний компонент /html, который использует значение, а html / component будет обновлять ваш компонент всякий раз, когда он изменяет значение. Тем не менее, когда вы также указываете (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 {}