我正在我的 Ionic 4 项目中工作,我已经创建了一个自定义组件,但在该自定义组件中,我的[(ngModel)]
不起作用。
这是我的自定义标头组件.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)]
不起作用,因为它没有在控制台中打印任何值。
这是我的自定义标头组件.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
这是我的组件.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{}
任何帮助都非常感谢。
你只需要在app.module.ts中导入FormsModule
。import { FormsModule } from '@angular/forms';
并在声明和条目组件中添加组件页
您可以看到以下示例
在应用程序中。
import { FormsModule } from '@angular/forms';
import { ComponentPage } from './component/component.page'
@NgModule({
declarations: [
ComponentPage,
],
entryComponents: [
ComponentPage,
],
imports: [FormsModule],
})
试试这个:
<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);
}
在此,您可以获取所选值。
如果您没有将离子选择放在表单标签中,则需要设置 name 属性。如果不将其放置在表单标记中,则必须在 ngModelOptions 中将表单控件定义为"独立"。就像这个搜索栏的例子一样。
<ion-searchbar (ionInput)="UpdateSearchResults($event)" [(ngModel)]="autocomplete.input" [ngModelOptions]="{standalone: true}"></ion-searchbar>
这在 Ionic 4 中对我来说效果很好。
另外,请确保将 CustomHeaderComponent 添加到 app.module.ts 中的声明数组中
这样:app.module.ts
declarations: [...other components, CustomHeaderComponent]
它应该是<ion-option
<ion-option value="en">English</ion-option>
堆栈闪电战演示
编辑:
如果是离子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 {}