在 Ionic 框架中绑定到 ngModel

Question

我在构建离子应用程序时难以将 ngModel 绑定到离子段。以下是我收到的错误的标题：

无法绑定到“ngModel”，因为它不是“ion-segment”的已知属性

我打算将共享模块用于两个模块。我使用标准 HTML 标记创建的另一个共享模块，它按要求工作。但这似乎导致错误。

我尝试了许多其他用户针对类似问题提出的解决方案，但似乎都没有解决问题。这是我正在使用的共享模块：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { SomeClass } from './some-class';

@NgModule({
    imports : [
        CommonModule,
        IonicPageModule.forChild(SomeClass),
    ],
    declarations : [SomeClass],
    exports : [SomeClass]
})

export class SharedModule{

}

相同的HTML文件是：

 <ion-segment [(ngModel)]="XXX" (click)="someMethod()">
   <ion-segment-button value="A"> A </ion-segment-button> 
   <ion-segment-button value="B"> B </ion-segment-button> 
   <ion-segment-button value="C"> C </ion-segment-button> 
 </ion-segment> 

注意：这只是 HTML 文件的一部分，要包含在整个其他页面中。

组件文件：

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'some-class',
  templateUrl: 'some-class.html'
})
export class SomeClass {

  XXX: String;

  constructor(public navCtrl: NavController) { }   

}

任何想法我哪里出错了，我应该怎么做才能解决问题？

注意：我已尝试导入 FormsModule 和 ReactiveFormsModule 并尝试导出引用，但没有任何帮助。

Answer 1

ngModel 指令来自 FormsModule。

错误是找不到指令（“未知”），这几乎总是缺少引用的指示。在这种情况下，FormsModule，它具有将 ngModel 指令绑定到任何 HTML 元素所需的库。

Angular 4 结合功能模块（例如，如果您使用共享模块）要求您还导出 ReactiveFormsModule 才能工作。

我认为模块的代码应该是：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; //CHANGE(ADD)
import { SomeClass } from './some-class';

@NgModule({
    imports : [
        CommonModule,
        FormsModule, ReactiveFormsModule, //CHANGE (ADD)
        IonicPageModule.forChild(SomeClass),
    ],
    declarations : [SomeClass],
    exports : [SomeClass, FormsModule, ReactiveFormsModule]
})

export class SharedModule{

}