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{

}

绑定到Ionic Framework中的ngModel

1 个答案: