离子4-双向绑定[(ngModel)] [英] Ionic 4 - Two way binding [(ngModel)]
问题描述
我正在努力在Ionic 4中使用双向绑定.我曾经使用过Ionic 3，并且双向绑定非常容易，我不确定为什么要这么做.
I'm struggling to use two way binding in Ionic 4. I used to use Ionic 3 and two way binding was super easy, I'm not sure why I'm struggling.
在我的 app.module.ts 中，我导入:
import { FormsModule } from '@angular/forms';
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
RoundProgressModule,
FormsModule,
HttpClientModule
],
在我的页面的 .ts 文件中，我只是初始化了一个变量:
On my .ts file for my page, I simply init a variable:
user:any = { phone: '', name: '', date: '' }
然后我调用一个函数来更改 user.phone
and then I have a function I call to change the format of user.phone
formatNumber() {
let num = this.user.phone;
this.user.phone = new AsYouType('US').input(num) // a package to format numbers
console.log(this.user.phone)
}
console.log 会生成正确的信息，但在 input 字段中不会更改..
the console.log produces the correct information, but it doesn't change in the input field..
我的 .html 文件如下所示:
<form>
<input class="phone-input" name="phone" type="text" placeholder="(123) 456-7890" (ngModelChange)="formatNumber()" [(ngModel)]="user.phone">
</form>
在我看来，这似乎都应该奏效...我做错了什么?对我来说，这似乎不是很明显.
To me, that seems like it should all work... What am I doing wrong? It doesn't seem very obvious to me.
谢谢！
推荐答案
尝试一下，
<form>
<input class="phone-input" name="phone" type="text" placeholder="(123) 456-
7890" (input)="formatNumber()" [(ngModel)]="user.phone">
</form>
input 而不是 ngModelChange .
这篇关于离子4-双向绑定[(ngModel)]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
