在 Ionic 框架中绑定到 ngModel

Posted 2023-03-13

【中文标题】在 Ionic 框架中绑定到 ngModel

【英文标题】：Binding to ngModel in Ionic Framework

【发布时间】：2018-10-10 18:51:20

【问题描述】：

我在构建离子应用程序时难以将 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 并尝试导出引用，但没有任何帮助。

【参考方案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

【讨论】：

已经尝试导入 FormsModule，但没有任何运气。谢谢你的努力。万一，Ionic标签绑定有什么问题吗？

不客气 Dhruv！我想，因为我们在剧中有一个SharedModule，所以也需要导入ReactiveFormsModule。你试过吗？

另外，既然是共享模块，我相信导入的模块需要导出。更新了代码。

刚刚注意到，您没有导出通用模块。能否请您将 Common 模块添加到导出数组一次尝试一下？

刚刚做了。问题仍然存在。