Мой [(ngModel)] не работает в пользовательском компоненте в Ionic 4

Question

Я работаю в своем проекте Ionic 4 и создал пользовательский компонент, но в этом пользовательском компоненте мой [(ngModel)] не работает.

Это мой 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)] не работает, потому что он не печатает никаких значений в консоли.

Это мой custom-header-component.component.ts:

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

В этом файле TS он не печатает никаких значений.

Может быть, проблема в том, что я не включил 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{}

Любая помощь очень ценится.

Answer 1

вам просто нужно импортировать FormsModule в app.module.ts

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

и добавьте ComponentPage внутри объявлений и entryComponents

Вы можете увидеть пример ниже

В app.module.ts

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

import { ComponentPage } from './component/component.page'


@NgModule({
  declarations: [
  ComponentPage,
 ],
entryComponents: [
   ComponentPage,
  ],
  imports: [FormsModule],

})

Answer 2

Это должно быть <ion-option

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

STACKBLITZ DEMO

РЕДАКТИРОВАТЬ:

Если это ионный 4, ваш код выглядит правильно.Как упоминалось в вопросе, если вы не включили FormsModule, вам необходимо добавить его как

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

Answer 3

Попробуйте:

<ion-select ngDefaultControl [(ngModel)]="languageSelected" (ionChange)='setLanguage($event)'>
    <ion-select-option value='en' [selected]="language==='en' ? true : null">English</ion-select-option>
    <ion-select-option value='ar' [selected]="language==='ar' ? true : null">Arabic</ion-select-option>
</ion-select> 

 setLanguage($event) {
    let me=this;
   console.log('Default language:', $event.target.value);
  }

В этом вы можете получить выбранное значение.