首页 > 解决方案 > Angular,如何使用 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>

我的行

                    <tr *ngFor="let person of persons; let i = index; ">
                    <td>{{person.id}}</td>
                    <td>{{person.name}}</td>
                    <td>{{person.email}}</td>
                    <button class="btn btn-primary" type="submit" (click)="deleteUser(i)">d
                    </button>
                </tr>

我正在像这样将我的对象推到数组中

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

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

所以我的问题是,如何将每一行的唯一 id 推送到对象,然后在 html 中使用 command {{person.id}}、 name 和 e-mail 显示它。我正在使用 Angular 8。在此先感谢。

标签: javascriptangulartypescriptangular-formbuilder

解决方案


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

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

推荐阅读