我的[(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
如果是离子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屋!