如何在离子中进行双向绑定？答案

【问题标题】：How do I make two way binding work in ionic?如何在离子中进行双向绑定？
【发布时间】：2021-09-27 13:20:54
【问题描述】：

我正在尝试通过两种方式绑定来使用 Angular/ionic，并且我的组件 html 具有以下内容：

 <ion-card>
  <ion-card-header>
    <ion-button><</ion-button>
    <ion-card-title>Create course</ion-card-title>
    <ion-button (click)=createYogaClass()>Create</ion-button>
  </ion-card-header>
  <ion-card-content>
    <ion-list>
      <ion-item>
        <ion-label>Name course</ion-label>
        <ion-input [(ngModel)]='randomString'>{{randomString}}</ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Location</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Date</ion-label>
        <ion-input type="date"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Start time</ion-label>
        <ion-input type="time"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>End time</ion-label>
        <ion-input type="time"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Course description</ion-label>
        <ion-textarea type="text"></ion-textarea>
      </ion-item>
      <ion-item>
        <ion-label>Teacher</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Teacher's description</ion-label>
        <ion-textarea type="text"></ion-textarea>
      </ion-item>
      <ion-item>
        <ion-label>Available seats</ion-label>
        <ion-input type="number"></ion-input>
      </ion-item>
    </ion-list>
  </ion-card-content>
</ion-card>

这适用于我的组件 .ts 文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.scss'],
})
export class CreateComponent implements OnInit {

  randomString: string = 'randomString';

  constructor() { }

  createYogaClass(){
    console.log("Creating yogaclass!");
    console.log(this.randomString);
  }

  ngOnInit() {}

}

但是，每当我尝试通过更改的输入更改值时，'randomString' 仍然未定义... 你能帮我弄清楚问题是什么。只是为了澄清我的 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';

@NgModule({
  declarations: [AppComponent, RegisterComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, FormsModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy, }],
  bootstrap: [AppComponent],
})
export class AppModule {}

按下创建按钮后的当前结果： https://imgur.com/a/j7tLLVg

【问题讨论】：

在你想显示结果的地方使用你的[(ngModel)]="randomString"。 <p>{{randomString}}</p>
我希望 randomString 的值在我输入输入字段时改变。可悲的是它没有改变。我不想在其他地方再次显示输入。
您的代码工作正常，不确定您的环境中的问题是什么：stackblitz.com/edit/ionic-angular-v5-ayb1z5?file=src/app/…
你想在哪里显示你的输入值，即randomString？将其添加到您的 HTML 中。

标签： javascript angular ionic-framework two-way-binding

【解决方案1】：

我发现我忘记将我的 CreateComponent 添加到声明中，如下所示：

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';
import { CreateComponent } from './create/create.component';

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

【讨论】：