Question

我无法使用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推送到对象，然后在名称和电子邮件中使用命令{{person.id}}在HTML中显示它。我正在使用Angular 8。预先感谢。

Answer 1

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

Answer 2

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

googleapi: Error 404: The Cloud SQL instance does not exist., instanceDoesNotExist

Answer 3

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

可悲的是，我认为使用模板表单的唯一解决方案是生成ID。（请参阅Durgesh Pal的回答）

但是！更好的解决方案是使用ReactiveForms，它们提供了更大的灵活性，您可以直接在表单中标识对象（因为您可以直接使用this.form.value，它将为您提供当前表单的对象）-以及完全通过RxForm代码从头开始生成表单。因此，我也建议您也看看以下内容：https://angular.io/guide/reactive-forms

希望这会有所帮助

Angular，如何使用formbuilder将id推送到每一行的对象

3 个答案: