我的[(ngModel)]在Ionic 4的自定义组件中不起作用 [英] My [(ngModel)] is not working in the custom component in Ionic 4

问题描述

我正在Ionic 4项目中工作，并且创建了一个自定义组件，但是在该自定义组件中，我的[(ngModel)]无法正常工作.

I am working in my Ionic 4 project and I have created a custom component but in that custom component my [(ngModel)] is not working.

这是我的 custom-header-component.component.html:

<ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()' ngDefaultControl>
    <ion-select-option value="en">English</ion-select-option>
    <ion-select-option value="ar">Arabic</ion-select-option>
</ion-select>

在此html中，我的[(ngModel)]无法正常工作，因为它未在控制台中打印任何值.

In this html my [(ngModel)] is not working because it is not printing any value in the console.

这是我的 custom-header-component.component.ts:

languageSelected: any;
setLanguage() {
let me=this;
console.log('languageSelected',me.languageSelected);
}

在此ts文件中，它不打印任何值.

In this ts file, it is not printing any value.

可能的问题是，我没有包含FormsModule.

Maybe the problem is that, I have not included the FormsModule.

这是我的文件夹:

custom-header-component:
|
-- custom-header-component.component.html
-- custom-header-component.component.scss
-- custom-header-component.component.spec.ts
-- custom-header-component.component.ts

components.module.ts

这是我的 components.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CustomHeaderComponentComponent } from './custom-header-component/custom-header-component.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [CustomHeaderComponentComponent],
    exports: [CustomHeaderComponentComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [
     FormsModule,
     ReactiveFormsModule
    ],
})
export class ComponentsModule{}

非常感谢您的帮助.

推荐答案

应为 <ion-option

It should be <ion-option

 <ion-option value="en">English</ion-option>

STACKBLITZ DEMO

STACKBLITZ DEMO

如果是离子4，则您的代码看起来正确.如问题中所述，如果您未包含 FormsModule ，则需要将其添加为

If it's ionic 4 ,your code looks correct. As mentioned in the question if you have not included FormsModule you need to add it as

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

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

这篇关于我的[(ngModel)]在Ionic 4的自定义组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！