angular - * ngFor循环中的Angular 2内联编辑

我正试图找到Angular2的内联编辑示例或指针。我在Angular1中找到了一些很好的例子，比如Inline edit demo (angular 1.0)。但我正在努力寻找角度2的类似例子。我基本上需要达到与本例中类似的结果。当谈到角度2（1或2）时，我是一个完全的新手，所以任何帮助都是非常感谢的。
我已经包含了我的html，我的想法是，当点击按钮时，userediting标志被设置为true，但是我只希望所选的行更改为input元素，而不是当前正在发生的，ngfor中的所有行

 <tr *ngFor='let user of userList'>
      <td>
        <input type="checkbox" [(ngModel)]="user.state">
      </td>

      <td>
        {{user.userId}}
      </td>

      <td>
        <input id="userName" type="text" class="form-control" ng-model="user.userName" *ngIf="userEditing" />
        <span *ngIf="!userEditing"> {{user.userName}}</span>
      </td>

      <td>
        <input type="text" class="form-control" ng-model="user.firstName" *ngIf="userEditing" />
       <span *ngIf="!userEditing"> {{user.firstName}}</span>
      </td>

      <td>
        <input type="text" class="form-control" ng-model="user.lastName" *ngIf="userEditing" />
       <span *ngIf="!userEditing"> {{user.lastName}}</span>
      </td>

        <td>
        <input type="text" class="form-control" ng-model="user.department" *ngIf="userEditing" />
       <span *ngIf="!userEditing"> {{user.department}}</span>
      </td>

        <td> <button type="button" [ngClass]="{disabled : !enableButton}" class="btn btn-default" (click)="getUserToEdit($event, user.userId)">{{editUserButtonCaption}}</button>
          <td> <button type="button" class="btn btn-default" (click)="deleteUser(user.userId)">{{deleteUserButtonCaption}}</button></tr>
    <tr>

最佳答案

你的代码快到了。
在你的循环中，你在循环。很好，但你漏掉了一个细节。您需要确保每个用户的属性*ngFor都设置为false。在您的代码中，userList作为一个变量，可以更改所有输入。您只想为您单击旁边的用户更改userEditing。
这些行：

<td>
  <input type="text" class="form-control" ng-model="user.department" *ngIf="userEditing" />
  <span *ngIf="!userEditing"> {{user.department}}</span>
</td>

应该读

<td>
  <input type="text" class="form-control" ng-model="user.department" *ngIf="user.userEditing" />
  <span *ngIf="!user.userEditing"> {{user.department}}</span>
</td>

然后在userEditing函数中，您需要将userEditingboolean更改为true，将文本与特定用户的输入进行切换。

getUserToEdit($event, user.userId){
  const userIndex = _.findIndex(this.users, {userId: user.userId});
  this.users[userIndex].userEditing = true;
}

getUserToEdit($event, user.userId)是userEditing函数范型库中的一个实用函数，它提供许多高阶函数，允许您以更简洁、更抽象的方式编写。帮你自己一个忙，开始使用它。
我可能会将_.findIndex和lodash更改为userId和userEditing-它们已经是id对象的属性-使您和同事在阅读代码时更容易看到它们。

关于angular - * ngFor循环中的Angular 2内联编辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42199406/