Question

我一直在努力做一个简单的任务，即在文本框中输入并列出相同的内容。示例代码如下： example.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。请帮助我了解我的错误，并帮助解决这个问题。

Answer 1

由于你的对象每次都有相同的键名，而推送对象时会更新新值，所以怎么做呢

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

从这里https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

了解Object.assign（）

Answer 2

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

轻松克隆该对象

this.record.push(username);

要

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

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

您也可以尝试快速修复（由于性能原因而非常气馁）;

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

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

2 个答案: