Двусторонняя привязка теряется после установки поля выбора
У меня есть 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 двусторонняя привязка теряется. Журнал консоли, похоже, указывает на то, что модель обновляется, но поле выбора не отвечает. Что мне не хватает?
3 ответа
Нашел решение здесь. Трюк должен был позвонить ChangeDetectorRef.detectChanges()
в функции до сброса значения.
Обратите внимание, однако, что необходимо использовать оба [(ngModel)]
а также (ngModelChange)
... только не спрашивайте меня, почему XD
Мне удалось получить желаемое поведение, изменив второе поле выбора из
<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, пожалуйста, прокомментируйте, как я хотел бы знать.
Небольшое изменение в вашем компоненте приложения. Передайте значение при вызове 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 {}