0

我无法使用 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。在此先感谢。

4

3 回答 3

0

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

addToUsers(person) {
    person = JSON.parse(JSON.stringify(person));
    person.id = new Date().getTime();
    this.persons.push(person);
  }
于 2019-09-15T12:05:07.967 回答
0

在您的表单元素中，如果可能，请使用官方的 ngSubmit 绑定，这是为什么的好处：https ://angular.io/api/forms/NgForm

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

但！一个更好的解决方案是使用 ReactiveForms，它们提供了更大的灵活性，并且您可以直接识别表单中的对象（因为您可以使用 this.form.value 并且它会给您返回当前表单的对象) - 以及纯粹通过 RxForm 代码从头开始生成表单。所以我想建议也看看这个：https ://angular.io/guide/reactive-forms

希望这会有所帮助

于 2019-09-15T12:10:43.970 回答
0

在onSubmit您可以生成一个唯一的 id 并将其分配给 person 对象，然后调用addToUsers并将其推送到数组

于 2019-09-15T09:45:23.837 回答