我是 Angular 的新手,正在学习 Angular 6。我了解 ngModel。但是当我尝试使用 ngModelChange 时,出现了一些问题。
我有一个html元素 HTML
<input #input type="text" [value]="name" [(ngModel)] ="name" (ngModelChange) ="change(input.value)"/>
typescript
change(event :any) {
this.name = event;
console.log(this.name);
}
更改输入中的值后,我可以看到名称属性的更改。
当我把html代码改成
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 中都按预期正常工作。
问题一
<input #input type="text" [value]="name" [(ngModel)] ="name"
(ngModelChange) ="change(input.value)"/>
&
<input #input type="text" [value]="name" [ngModel] ="name"
(ngModelChange)="change(input.value)" />
一样吗??
问题二。
当我删除 [ngModel] 指令时。 ngModelChange 没有被触发。 [ngModel] 是必须的吗?如果是,为什么?
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);
}
这会很有帮助。 提前致谢。
最佳答案
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
将不起作用。
<input (ngModelChange) ="name = $event"/>
关于angular - [ngModel] 和 (ngModelChange) 如何协同工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57901940/