Question

想使用angular2表格一次编辑多行

edit btn不能一次编辑多个行，而试图打开时，请先关闭第一行，然后关闭选定的行，但要求所有行都应可编辑

Answer 1

您可以在实体模型上添加FormGroup字段。

例如；

export class Product{

   name:string
   manufacturer:string
   editForm:FormGroup
   isEditing:boolean
}

在您的桌子上

<table class="table">
<thead>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Manufacturer</th>
        <th scope="col">#</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let product of products">


        <ng-template [ngIf]="product.isEditing">

            <form [formGroup]="product.editForm">

                <td>
                    <input type="text" formControlName="name" />
                </td>

                <td>
                    <input type="text" formControlName="manufacturer" />
                </td>

                <td>
                    <button type="submit" (click)="saveChanges()">Save</button>
                    <button type="button" (click)="product.isEditing = false">Cancel</button>
                </td>


            </form>


        </ng-template>


        <ng-template [ngIf]="!product.isEditing">

            <td>{{product.name}} </td>
            <td>{{product.Manufacturer}}</td>
            <td><button (click)="product.isEditing = true">Edit</button></td>

        </ng-template>


    </tr>
</tbody>

保存更改时

saveChanges(product:Product){

//Maybe api call

product.isEditing = false

}

Answer 2

单击userEdit上的

传递用户对象，并为其分配您具有的形式，如下所示。它会工作。编辑完毕后，单击“提交”，它将以表格的形式反映在所有行上

userEdit(user) {
  this.form.setValue({
    username: user.username,
    email: user.email
  })
}

如何使用Form使用angular2一次编辑多行

2 个答案: