Angular2 – 将ngModel绑定到属性的引用

发布时间：2020-12-17 06:48:21 所属栏目：安全来源：网络整理

导读：我有一长串用户输入,并希望将它们存储在一个对象中,而不是用 HTML拼写出来.我想将这些值绑定到另一个存储用户/客户数据的对象.由于其简单性和功能性,优选使用ngModel. 谁知道我怎么能做到这一点？以下示例(不工作). @Component({ template: ` div h2NgModel

我有一长串用户输入,并希望将它们存储在一个对象中,而不是用 HTML拼写出来.我想将这些值绑定到另一个存储用户/客户数据的对象.由于其简单性和功能性,优选使用ngModel.

谁知道我怎么能做到这一点？

以下示例(不工作).

@Component({
  template: `
    <div>
      <h2>NgModel Example</h2>
      <div *ngFor="let input of inputList">
        {{ input.label }} <input type="text" [(ngModel)]="input.bindTo">
      </div>
    </div>

    <p>This is not working: {{customerInfo.name}},{{customerInfo.email}}</p>
  `,directives: [...]
})

export class AppComponent {
  inputList = [
    {
      label: "Enter your name",bindTo: this.customerInfo.name  // also tried 'customerInfo.name'
    },{
      label: "Enter your email",bindTo: this.customerInfo.email
    }
  ]  

  customerInfo = {
    name: 'test',email: ''
  }
}

解决方法

这不受支持. ngModel只能绑定到组件的属性.我也没有看到通过模板中的字符串文字引用组件属性的方法,没有辅助方法：

这可能对你有用：

<div *ngFor="#input of inputList">
    {{ input.label }} 
    <input type="text" 
        [ngModel]="getProp(input.bindTo)" 
        (ngModelChange)="setProp(input.bindTo,$event)">
  </div>

inputList = [
    {
      label: "Enter your name",bindTo: "name"
    },bindTo: "email"
    }
  ];

  getProp(prop) {
    return this[prop];
  }

  setProp(prop,value) {
    this[prop] = value;
  }

<div *ngFor="#input of inputList; #i = index">
    {{ input.label }} <input type="text" [(ngModel)]="inputList[i]">
  </div>

提示=>应该用let替换RC.0#

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!