Ionic 结合 Angular 实现双向绑定失效的问题如何解决？

• 核心原因：CreateComponent 未在 AppModule 的 declarations 数组中注册，导致Angular无法正确识别组件上下文，[(ngModel)] 双向绑定指令无法和组件内的 randomString 变量建立关联，最终取值为undefined。
• 次要问题：ion-input 组件使用方式不规范，不应该在<ion-input>标签内部写插值表达式{{randomString}}，Ionic的表单输入组件的值完全由value属性或ngModel绑定控制，内部额外写的内容可能干扰绑定逻辑。

1. 首先修改app.module.ts，导入并将CreateComponent加入declarations数组：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
// 导入CreateComponent
import { CreateComponent } from './create/create.component';

@NgModule({
  // 将CreateComponent加入声明数组
  declarations: [AppComponent, RegisterComponent, CreateComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, FormsModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy, }],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 修改组件HTML中ion-input的写法，删除标签内部的插值表达式：

<ion-item>
  <ion-label>Name course</ion-label>
  <ion-input [(ngModel)]='randomString'></ion-input>
</ion-item>

补充提示 #

如果后续给表单外层加上了<form>标签，需要给每个使用[(ngModel)]的输入组件添加唯一的name属性，否则Angular表单逻辑会抛出异常，示例如下：

<ion-input [(ngModel)]='randomString' name="courseName"></ion-input>

如果项目使用了路由懒加载，CreateComponent归属于某个子模块的话，需要在对应的子模块中也导入FormsModule，才能正常使用双向绑定功能。

内容的提问来源于stack exchange，提问作者Dieter Claessens