[ngModel] 和 (ngModelChange) 如何协同工作? [英] How [ngModel] and (ngModelChange) work together?
问题描述
我是 angular 的新手,我正在学习 Angular 6.我了解 ngModel.但是当我尝试使用 ngModelChange 时,提出了一些问题.
I am new to angular and I am learning Angular 6. I understood about ngModel. But while I was experimenting with ngModelChange, some questions raised.
我有一个 html 元素HTML
I have an html element HTML
<input #input type="text" [value]="name" [(ngModel)] ="name" (ngModelChange) ="change(input.value)"/>
打字稿
change(event :any) {
this.name = event;
console.log(this.name);
}
更改 input 中的值后,我可以看到 name 属性的更改.
Upon changing the value in the input , I can see the changes with the name property.
当我将 html 代码更改为
When I changed the html code to
HTML
<input #input type="text" [value]="name" [ngModel] ="name"
(ngModelChange)="change(input.value)" />
{{ name }}
TS
change(event :any) {
this.name = event;
console.log(this.name);
}
它在控制台和 UI 中按预期工作正常.
It's working fine as expected in the console and in the UI.
问题 1
<input #input type="text" [value]="name" [(ngModel)] ="name"
(ngModelChange) ="change(input.value)"/>
&
<input #input type="text" [value]="name" [ngModel] ="name"
(ngModelChange)="change(input.value)" />
一样吗??
问题 2.
当我删除 [ngModel] 指令时.ngModelChange 没有被触发.必须拥有 [ngModel] 吗?如果是,为什么?
When I remove the [ngModel] directive. The ngModelChange is not getting triggered. Is it mandatory to have [ngModel]? If yes,Why?
HTML
<input #input type="text" [value]="name"
(ngModelChange)="change(input.value)" />
<br/>
<br/>
{{ name }}
TS
change(event: any) {
this.name = event;
console.log(this.name);
}
这将是一个很大的帮助.提前致谢.
This would be a great help. Thanks in Advance.
推荐答案
当元素具有名为 x 的可设置属性和名为 xChange 的相应事件时,[()] 语法很容易演示.这是一个适合这种模式的 SizerComponent.它有一个 size value 属性和一个伴随 sizeChange 事件
The [()] syntax is easy to demonstrate when the element has a settable property called x and a corresponding event named xChange. Here's a SizerComponent that fits this pattern. It has a size value property and a companion sizeChange event
https://angular.io/guide/template-syntax#basics-of-two-way-binding
所以,它们是等价的.
<input [(ngModel)]="name"/>
<input [ngModel]="name" (ngModelChange) ="name = $event"/>
但是如果没有对应的属性,那么xChange
将不起作用.
But if there is no corresponding property, then xChange
will not work.
<input (ngModelChange) ="name = $event"/>
这篇关于[ngModel] 和 (ngModelChange) 如何协同工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!