Ionic 4 - 离子输入双向绑定答案

【问题标题】：Ionic 4 - Ionic Input Two-Way BindingIonic 4 - 离子输入双向绑定
【发布时间】：2019-02-17 15:18:05
【问题描述】：

在 Ionic 4 中，您如何进行双向绑定。在 Ionic 3 中，我会执行以下操作：

<ion-item color="light"> <ion-input type="string" placeholder="Username" [(ngModel)]="username"></ion-input> </ion-item>

但是在 Ionic 4 中我收到以下错误：

Can't bind to 'ngModel' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("d>
          <ion-item color="light">
              <ion-input type="string" placeholder="Username" [ERROR ->][(ngModel)]="username"></ion-input>
          </ion-item>
          <ion-item color="light">
"): ng:///AppModule/LoginPage.html@12:62

如何在 Ionic 4 中实现这一点？

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

请记住将 FormsModule 添加到您的模块或创建 SharedModule 以导入和导出 FormsModule

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

【讨论】：

【解决方案2】：

离子 3/4 角 6

为了能够对表单输入使用双向数据绑定，您需要在 Angular 模块中导入 FormsModule 包。更多信息请参见 Angular 官方教程here

举例

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

【讨论】：

【解决方案3】：

您只需要在 app.module.ts 中导入 FormsModule。因为我已经详细给出了答案。访问链接了解详情 https://stackoverflow.com/a/55684045/7983887

【讨论】：

【解决方案4】：

在你的 Angular 模块中添加 FormsModule

【讨论】：