时间戳

首页 > 解决方案 > 如何使用 angular2 使用表单一次编辑多行

angular - 如何使用 angular2 使用表单一次编辑多行

问题描述

想使用 angular2 形式一次编辑多行

编辑 btn 不能一次编辑多行，同时尝试打开编辑第一行编辑关闭和选定行编辑打开，但要求所有行都应该是可编辑的

标签： angulareditonsubmit

解决方案

您可以在实体模型上添加 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

}

推荐阅读