为什么Ionic 3双向数据绑定不起作用? [英] Why is ionic 3 two way data binding not working?

问题描述

请尝试为我正在进行的离子项目充实注册页面 试图将我的[[ngModel])绑定到组件中的对象属性.

please I'm trying to flesh out a registration page for my ionic ongoing project Trying to bind my ([ngModel]) to an object property in my component.

让我只显示代码摘录，以便您了解

Let me just show the code excerpt so you'll understand

**Registration.ts** // This is my registration component
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-registration',
  templateUrl: 'registration.html',
})

export class RegistrationPage {
  newStaffInfo = {
      username: "",
      password: "",
      rePassword: "",
      email: "",
      sex: ""
  }


newStaffTemplateObject: Object = [
      {
        label: "Username",
        field: this.newStaffInfo.username,
      },

      {
        label: "Password",
        field: this.newStaffInfo.password  
      },

      {
        label: "Re-enter Your password",
        field: this.newStaffInfo.rePassword  
      },
      {
        label: "Email",
        field: this.newStaffInfo.email  
      },

      {
        label: "Sex",
        field: this.newStaffInfo.sex  
      },

  ];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad RegistrationPage');
  }


  validateForm(){
      console.log("Validate in this functin...");
  }
}

这是我的HTML模板

<ion-content padding>

    <form (ngSubmit)="validateForm()" #form="ngForm">
        <ion-list>

            <ion-item *ngFor="let item of newStaffTemplateObject">
                <ion-label floating> {{item.label}} </ion-label>
                <ion-input type="text" [(ngModel)]="item.field" name="item.label" #item.label="ngModel" required> </ion-input>
            </ion-item>

            <ion-item>
                <button ion-button outline block full> Register </button>
            </ion-item>

        </ion-list>
    </form>

<!-- For DEbugging puprpose only -->

{{newStaffInfo.username}}  //This is suppose to reflect changes immediately
</ion-content>

即使使用上述设置，它也根本无法工作. 我该怎么做才能使两个数据绑定正常工作

Even with the above setup, it's not working at all. What can i do here to make the two data binding work

推荐答案

在您的代码中，使用newStaffInfo的属性初始化newStaffTemplateObject项:

In your code, you initialize the newStaffTemplateObject items with the properties of newStaffInfo:

newStaffTemplateObject = [
  {
    label: "Username",
    field: this.newStaffInfo.username
  },
  {
    label: "Password",
    field: this.newStaffInfo.password
  },
  ...
];

，然后将newStaffTemplateObject项绑定到模板中的输入元素.

and then you bind the newStaffTemplateObject items to the input elements in the template.

数据绑定有效:它更新newStaffTemplateObject项的值.但是，它不会更新newStaffInfo中的相关属性(根据调试标记，这是您期望的).原因:newStaffTemplateObject[0].field没有成为对newStaffInfo.username的引用；它是一个单独的变量，在初始化后不会与它保持任何链接.

The data binding works: it updates the values of the newStaffTemplateObject items. However, it does not update the related properties in newStaffInfo (which is what you expected, according to your debugging markup). The reason: newStaffTemplateObject[0].field does not become a reference to newStaffInfo.username; it is a separate variable that does not maintain any link with it after having been initialized.

一种可能的解决方案是将每个field值设置为newStaffInfo中属性的名称:

One possible solution is to set each field value to the name of the property in newStaffInfo:

newStaffTemplateObject = [
  {
    label: "Username",
    field: "username",
  },
  {
    label: "Password",
    field: "password"
  },
  {
    label: "Re-enter password",
    field: "rePassword"
  },
  {
    label: "Email",
    field: "email"
  },
  {
    label: "Sex",
    field: "sex"
  },
];

，并使用newStaffInfo的属性绑定到您的输入元素="nofollow noreferrer">方括号符号:

and to bind the properties of newStaffInfo to your input elements using the bracket notation:

<ion-item *ngFor="let item of newStaffTemplateObject">
  ...
  <ion-input type="text" [(ngModel)]="newStaffInfo[item.field]" ... > </ion-input>
</ion-item>

您可以在 此stackblitz 中测试代码.

You can test the code in this stackblitz.

这篇关于为什么Ionic 3双向数据绑定不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！