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

Question

我正在尝试通过两种方式进行绑定以与 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

Answer 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 {}

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

How do I make two way binding work in ionic?

javascript

ionic-framework

angular

two-way-binding