Angular 为什么离子3双向数据绑定不起作用？

我正在为我正在进行的项目充实一个注册页面 正在尝试将我的（[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>

{{item.label}
登记
{{newStaffInfo.username}}///这应该立即反映更改

即使使用上述设置，它也根本不起作用。

---

要使这两个数据绑定工作，我在这里可以做些什么呢？在您的代码中，使用

newStaffInfo

的属性初始化

newStaffTemplateObject

项：

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

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

然后将

newStaffTemplateObject

项绑定到模板中的输入元素

数据绑定工作：它更新

newStaffTemplateObject

项的值。但是，它不会更新

newStaffInfo

中的相关属性（根据调试标记，这是您所期望的）。原因：

newStaffTemplateObject[0]。字段

不会成为对

newStaffInfo.username

的引用；它是一个单独的变量，在初始化后不会与它保持任何链接

一种可能的解决方案是将每个

字段

值设置为

newStaffInfo

中的属性名称：

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

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

并使用以下命令将

newStaffInfo

的属性绑定到输入元素：

...

您可以在中测试代码。

这是一个单独的答案，因为我无法对Connorsfan的答案添加注释

Connorsfan的回答对我的第一期非常有帮助，并为我指明了Stackblitz的方向，谢谢

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

建立在ConnorsFan的stackblitz之上，添加了动态数据绑定和多级支持，因为在使用表达式处理多级json时，香蕉盒子[（ngModel）]不起作用。可通过以下链接找到：

---

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

控制台中没有错误消息？没有。它渲染正确。只是不知道哇！这个解决方案真是太棒了。这是一个非常优雅的解决方案。不过有一个问题。1.这意味着您正在使用数组索引引用这些对象？不是使用数组索引，而是使用属性名。我添加了一个到的链接，您可以在其中找到有关属性访问器的更多详细信息。请参考。虽然此链接可能会回答问题，但最好在此处包含答案的基本部分，并提供该链接以供参考。如果链接页面发生更改，则仅链接的答案可能无效