Arrays 尝试向对象数组添加新元素，但在成功推送数组中的第一个对象（用户）之后。它又重写了一遍

我有一个ObjectSuser数组，其中数组中的2个元素已经硬编码。在数组中插入新元素时，它会一次又一次地覆盖同一元素。 每次单击“提交”按钮时，我都试图在数组中获取新元素

这是我的密码：

文件users.component.ts

文件users.component.html

---

调用push不会复制您的对象，因为JavaScript对象是通过引用传递的：您正在推送与数组项相同的对象

---

每次尝试将addUserDataObject推入阵列时，您都可以通过创建一个新的addUserDataObject轻松解决此问题。

创建用户对象的克隆可以解决此问题

addUser(addUserData) {
    var newobj = Object.assign({}, addUserData); //new code
     this.users.push(newobj);
  }

---

你真的想重新思考这个方法。一切都是通过引用您设置的方式进行的，因此行为是预期的。放松ngModel方法，选择被动形式。此外，请仔细阅读不变性——它将使您的代码更具可预测性——特别是当它变得更大时。这可能无法修复它。。NgModel指向同一对象时存在双向绑定..True。但是，如果他想坚持原来的观点，他可以克隆obj并推动克隆的obj。

<form  (ngSubmit)="onSubmit('usersForm')" class="form-group"  class="solidBorderWithPadding" class="container" >
  <div>
    <label for="firstName">First Name </label>
    <input required minlength="3" [(ngModel)]="addUserData.name" name="firstName"   type="text" id="firstName" class="form-control" class='form-control'>
</div>
<div>
  <label for="email">Email </label>
  <input required minlength="3" [(ngModel)]="addUserData.email" name="email"   type="email"  id="email" class="form-control" class='form-control'>
</div>
<button class="btn btn-primary" type="button" (click)='onSubmit()'>Submit</button>
</form>

<ul>
  <li *ngFor="let user of users">
  Name :  {{ user.name }}
  Email : {{ user.email}}
  </li>
</ul>

addUser(addUserData) {
    var newobj = Object.assign({}, addUserData); //new code
     this.users.push(newobj);
  }