1

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

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

**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>

即使使用上述设置，它也根本不起作用。我可以在这里做什么来使两个数据绑定工作

4

2 回答 2

2

在您的代码中，您使用以下属性初始化newStaffTemplateObject项目newStaffInfo：

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

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

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

一种可能的解决方案是将每个field值设置为以下属性的名称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到您的输入元素：

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

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

于 2018-03-06T22:38:52.813 回答
1

这显示为一个单独的答案，因为我无法对 Connorsfan 的答案添加评论。

Connorsfan 的回答对我最初的问题非常有帮助，并为我指明了 Stackblitz 的方向，谢谢！

我还遇到了一个有趣的问题，试图导航多级 json 并使用真正的动态表单。

建立在 ConnorsFan 的 stackblitz 之上，以添加具有多级支持的动态数据绑定，因为在使用表达式处理多级 json 时，banana-in-the-box [(ngModel)] 不起作用。可在此链接中找到：https ://stackblitz.com/edit/angular-ymvaml

希望这将帮助其他面临相同问题但使用多级 json 的人。

于 2018-10-03T11:33:56.067 回答