带有 JSON 对象的 ngFor - Angular 2 ngmodel 透视图答案

【问题标题】：ngFor with JSON object - Angular 2 ngmodel perspective带有 JSON 对象的 ngFor - Angular 2 ngmodel 透视图
【发布时间】：2017-07-20 07:40:12
【问题描述】：

我一直在尝试做一个简单的任务，即在文本框中输入并列出相同的内容。示例代码如下：示例.html：

<label>Name:</label>
<input type="text" [(ngModel)]="user.name" placeholder="Enter a name here">

<!-- conditionally display `yourName` -->
<button (click)="getData(user)">Add</button>
<hr>
<ul>
    <li *ngFor="let rec of record">{{rec.name}}</li>
</ul>

example.ts 中的代码如下：

 record:any[]=[];
  user={"name":""};
  getData(username:any){
    this.record.push(username);
    console.log(JSON.stringify(this.record));
  }

我面临的问题是，当我插入第二个输入时，即使第一个输入更改为第二个，因为两者都引用相同的 ngModel。例如，如果我添加“GG”作为输入，第一条记录将是 GG。然后当我输入“HH”时，首先记录GG更改为HH，结果将是HH和HH。请帮助我了解我哪里出错并帮助解决这个问题。

【问题讨论】：

能否添加完整的代码，如何添加更多输入？有angular.io/guide/reactive-forms 说明如何添加FormGroups 数组。
@AntonM。我在输入框中添加单个名称。单击添加时，它会传递到列表。在同一个输入框中，我也添加了另一个输入。

标签： javascript arrays json angular

【解决方案1】：

由于您的对象每次推送时都具有相同的键名，因此对象将更新为新值，所以如何做到这一点

 this.record.push(Object.assign({}, username));

从这里https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign阅读有关 Object.assign() 的信息

【讨论】：

这正是我想要的。谢谢！
很高兴我能帮上忙！祝你有美好的一天，快乐的编码！ :)

【解决方案2】：

您已正确理解问题是由具有相同引用的对象引起的。当您尝试将用户详细信息存储在一个简单对象中时，您可以通过更改轻松克隆该对象

this.record.push(username);

到

this.record.push(_.clone(username));

_.clone 是一个 lodash 函数，它将传递一个新对象而不是引用。

您也可以尝试快速修复（由于性能原因，强烈建议不要这样做）；

this.record.push(JSON.parse(JSON.stringify(username)));

【讨论】：

首先感谢您的解决方案。克隆是我什至想到的事情。除此之外，我想知道第二个解决方案是如何工作的。你能告诉我吗？