Angular - 具有多重绑定(bind)的 TextArea

Question

我的屏幕上有两个输入字段(“名称”和“城市”)和一个文本区域。文本区域填充了一些 JSON 数据，数据包含一些详细信息，如“名称”、“城市”、“地址”、“密码”等。

当用户在“名称”或“城市”输入字段中键入内容时，如何只更新文本区域内的“名称”或“城市”。

有什么东西可以对 textarea 进行多重绑定(bind)吗？

如有任何帮助，我们将不胜感激。

Answer 1

对于这种情况，没有多重绑定(bind)可用，但是，您可以在每次更改事件时解析 json，并更新相关字段:

参见 demo

@Component({
  selector: "hello",
  template: `
    <textarea (change)="updateObj()" [(ngModel)]="objJson"></textarea>
    {{ obj | json }}
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  obj = {
    name: "John",
    city: "Chicago"
  };

  objJson: string;

  constructor() {
    this.objJson = JSON.stringify(this.obj);
  }

  updateObj() {
    const tempObj = JSON.parse(this.objJson);
    this.obj.name = tempObj.name;
    this.obj.city = tempObj.city;
    // also possible for a generic update:
    // Object.keys(this.obj).forEach(k => { this.obj[k] = tempObj[k]; });
  }
}