Angular2 - 将 ngModel 绑定到属性的引用 [英] Angular2 - bind ngModel to a reference of a property

问题描述

我有很长的用户输入列表，我想将它们存储在一个对象中，而不是用 HTML 拼写出来.我想将这些值绑定到另一个存储用户/客户数据的对象.由于其简单性和功能性，最好使用 ngModel.

有人知道我是如何做到这一点的吗?

以下示例(不起作用).

@Component({模板:`<div><h2>NgModel 示例</h2><div *ngFor="让 inputList 的输入">{{ input.label }} <input type="text" [(ngModel)]="input.bindTo">

<p>这不起作用:{{customerInfo.name}}, {{customerInfo.email}}</p>`，指令: [...]})导出类 AppComponent {输入列表 = [{标签:输入您的名字"，bindTo: this.customerInfo.name//也试过 'customerInfo.name'},{标签:输入您的电子邮件"，bindTo: this.customerInfo.email}]客户信息 = {name: '测试',电子邮件: ''}}

解决方案

不支持.ngModel 只能绑定到组件的一个属性.我也没有看到在没有帮助方法的情况下通过模板中的字符串文字引用组件属性的方法:

这可能对您有用:

 
{{ input.label }}<输入类型="文本"[ngModel]="getProp(input.bindTo)"(ngModelChange)="setProp(input.bindTo, $event)">

 inputList = [{标签:输入您的名字"，绑定到:名称"},{标签:输入您的电子邮件"，绑定到:电子邮件"}];获取道具(道具){返回这个[prop];}setProp(prop, value) {this[prop] = 值；}

<打击>

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

提示 for => RC.0 # 应替换为 let

I have a long list of user inputs, and would like to store these in an object instead of spelling them out in HTML. I want to bind these values to another object that stores the user/customer's data. Preferably using ngModel due to its simplicity and functionality.

Anyone knows how I can achieve this?

Example below (not working).

@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: ''
  }
}

解决方案

That's not supported. ngModel can only bind to a property of the component. I also don't see a way to refer to a component property by a string literal from the template without helper methods:

This might work for you:

  <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"
    },
    {
      label: "Enter your email",
      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>

hint for => RC.0 # should be replaced by let

这篇关于Angular2 - 将 ngModel 绑定到属性的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！