Question

我正在尝试用Ionic中的表格写一个模态。出于某种原因，只要我将ngModel与<ion-checkbox>（或<ion-radio>相关联），我的模态就不会显示（构造函数被调用）。

我的控制器：

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

@Component({
  selector: 'page-alert-modal',
  templateUrl: 'alert-modal.html',
})
export class AlertModalPage {

  formData = {};

  constructor(public navCtrl: NavController, public navParams: NavParams, viewCtrl:ViewController) {
    //this.formData = {xy:"", name:"", obd:""};
    console.log ("*** Modal constructor");

  }

  logForm() {
    console.log ("Submitted")
  }

我的模板：

<ion-content padding>

<form (ngSubmit)="logForm()">
  <ion-list-header>Trip Details</ion-list-header>
  <ion-item>
    <ion-label floating>Name your trip:</ion-label>
    <ion-input [(ngModel)]="formData.name" name="tripname"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Track GPS lat/long</ion-label>
    <!-- if I enable the line below, the modal does not show up -->
    <!--<ion-checkbox [(ngModel)]="formData.xy"></ion-checkbox>-->
    <ion-checkbox></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Read BLE OBD</ion-label>
    <!-- if I enable the line below, the modal does not show up -->
    <!--<ion-checkbox [(ngModel)]="formData.obd"></ion-checkbox>-->
    <ion-checkbox></ion-checkbox>
  </ion-item>
</form>
  <button ion-button block outline>Ok</button>
</ion-content>

我的离子信息：

cli packages:

    @ionic/cli-plugin-cordova       : 1.5.0 
    @ionic/cli-plugin-ionic-angular : 1.4.0 
    @ionic/cli-utils                : 1.6.0 
    ionic (Ionic CLI)               : 3.6.0 

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.0.2
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.5.3

System:

    Android SDK Tools : 25.2.5
    Node              : v8.1.4
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy        : 1.9.0 
    ios-sim           : 5.0.2 
    npm               : 5.0.3

Answer 1

问题解决了。我在文档中错过了这部分

注意：如果在Form标记中使用ngModel，则必须提供名称属性。如果不这样做，则必须将Standalone设置为true ngModelOptions

所以这很有效：

<ion-item>
    <ion-label>Track GPS lat/long</ion-label>
    <ion-checkbox [(ngModel)]="formData.xy" name="xy"></ion-checkbox>
</ion-item>

ngModel与ion-checkbox问题

1 个答案: