我的 [(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

您只需要在 app.module.ts

中导入 FormsModule

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

并在 declarations 和 entryComponents

中添加 ComponentPage

你可以看下面的例子

在 app.module.ts

中

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

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


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

})

Answer 2

试试这个：

<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);
  }

在此，你可以得到选中的值。

Answer 3

如果您没有将 ion-select 放置在表单标签内，则需要设置 name 属性。如果您没有将它放在表单标签中，则表单控件必须在 ngModelOptions 中定义为“独立”。就像这个搜索栏的例子一样。

<ion-searchbar (ionInput)="UpdateSearchResults($event)" [(ngModel)]="autocomplete.input" [ngModelOptions]="{standalone: true}"></ion-searchbar>

这在 Ionic 4 中对我来说很好。

Answer 4

另外，请确保将 CustomHeaderComponent 添加到 app.module.ts 中的声明数组中

像这样： app.module.ts

declarations: [...other components, CustomHeaderComponent]

Answer 5

应该是<ion-option

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

STACKBLITZ DEMO

编辑：

如果它是 ionic 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 {}