Привязка к ngModel в Ionic Framework

Question

У меня проблемы с привязкой ngModel к ионному сегменту при создании ионного приложения. Ниже приведен заголовок ошибки, которую я получил:

Невозможно связать с 'ngModel', поскольку оно не является известным свойством 'ion-сегмента'

Я намерен использовать Shared Module для двух модулей. Еще один общий модуль, который я создал с использованием стандартных тегов 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{

}