Как редактировать несколько строк одновременно, используя angular2, используя форму - PullRequest
Новая
       11

Как редактировать несколько строк одновременно, используя angular2, используя форму

0 голосов
/ 24 января 2019

хотите редактировать несколько строк одновременно, используя форму angular2

редактировать btn, но не для редактирования нескольких строк одновременно, при попытке открыть редактирование, редактирование первой строки закрывается, и редактирование выбранных строк открывается, но требуется, чтобы все строки были редактируемыми

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Вы можете добавить поле 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

}
0 голосов
/ 24 января 2019

при нажатии userEdit передайте пользовательский объект и присвойте ему форму, как показано ниже.Это будет работать.После редактирования нажмите кнопку «Отправить», и он отобразится во всех строках в форме 

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