Angular My[（ngModel）]在Ionic 4中的自定义组件中不起作用

我在Ionic 4项目中工作，我创建了一个自定义组件，但在该自定义组件中，我的

[（ngModel）]

不起作用

这是我的自定义标题组件。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>

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

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

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

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

可能问题是，我没有包括

表单模块

这是我的文件夹：

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

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

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

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

这是我的组件。module.ts:

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

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

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

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],

})

declarations: [...other components, CustomHeaderComponent]

并在声明中添加组件页面和入口组件

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

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

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


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

})

declarations: [...other components, CustomHeaderComponent]

您可以看到下面的示例

在app.module.ts中

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

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

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


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

})

declarations: [...other components, CustomHeaderComponent]

试试这个：

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


英语
阿拉伯文
setLanguage（$event）{
让我=这个；
log（'默认语言：'，$event.target.value）；
}

在这种情况下，您可以获得所选的值。
如果您没有将ion select放置在表单标记中，则需要设置名称属性。如果未将其放置在表单标记中，则表单控件必须在ngModelOptions中定义为“独立”。就像这个搜索栏的例子一样

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



这对我在Ionic 4中的工作很好。
此外，请确保将CustomHeaderComponent添加到app.module.ts中的声明数组中

像这样：
应用程序模块.ts

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

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

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


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

})

declarations: [...other components, CustomHeaderComponent]

先生，我用的是离子4，这不起作用。我已经在我的app.module.ts中添加了这个。我已经将它导入到我的components.module.ts中。你能在stackblitz上生成吗？你能告诉我如何在没有NGModel的情况下获取这个选择的值吗？如果你没有包含
FormsModule
，那么你应该在控制台中得到错误，并在导入中添加
FormsModule
array@ashishpal. 好的，但在哪个文件中，我必须在你的模块中导入。ts@ashishpal. 为此，我没有module.ts文件.in
components.module.ts
add
imports:[FormsModule]
并从“@angular/forms”导入{FormsModule}