问题描述
请我尝试为我正在进行的 ionic 项目充实一个注册页面试图将我的 ([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 模板
This is my HTML Template
<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"
},
];
并使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/将 newStaffInfo
的属性绑定到您的输入元素Operators/Property_Accessors" rel="nofollow noreferrer" target="_blank">括号表示法:
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>
您可以在this stackblitz中测试代码.
You can test the code in this stackblitz.
这篇关于为什么 ionic 3 双向数据绑定不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,WP2