Javascript 角度，如何使用formbuilder将id推送到每行的对象

我无法使用formbuilder将id推送到每行的对象。 这是我的表格

     <form [formGroup]="add">
    <label for="name"> Name:
        <input id="name" type="text" formControlName="name">
    </label>
    <label for="email"> E-Mail:
        <input id="email" type="email" formControlName="email">
    </label>
    <button class="btn btn-primary" type="submit" (click)="onSubmit(add.value)">add
    </button>
</form>

所以我的问题是，如何将每一行的唯一id推送到对象，然后在name和e-mail中使用命令

{{person.id}}

在html中显示它。 我用的是角度8。

---

提前感谢。

在

onSubmit

中，您可以生成一个唯一id并将其分配给person对象，然后调用

addToUsers

并将其推送到数组中

使用随机函数或日期生成唯一id

addToUsers(person) {
    person = JSON.parse(JSON.stringify(person));
    person.id = new Date().getTime();
    this.persons.push(person);
  }

---

在您的表单元素中，如果可能，请使用官方的ngSubmit绑定，原因如下：

遗憾的是，我认为使用模板表单的唯一解决方案是生成ID（参见Durgesh Pal的答案）

但是！更好的解决方案是使用ReactiveForms，它们允许更大的灵活性，并且您可以直接识别表单中的对象（因为您可以直接使用this.form.value，它将返回当前表单的对象），还可以完全通过RxForm代码从头开始生成表单。所以我建议大家也来看看这个：

---

希望这是有帮助的

尝试过了，现在每一行在添加新对象时都有相同的id和每次单击时的更改。此链接中存在相同的问题。所有行都有相同的id，当我添加新的行时，每一行都会更改id，所有行都是相同的。它显示相同的id是因为表单中的对象引用相同。在添加行后重置表单-

this.add.reset

，或者使用

JSON.parse（JSON.stringify（person））

更改引用。

onSubmit(value) {
    this.addToUsers(value);
  }

  addToUsers(person) {
    this.persons.push(person);
  }

addToUsers(person) {
    person = JSON.parse(JSON.stringify(person));
    person.id = new Date().getTime();
    this.persons.push(person);
  }