Question

我正在尝试为Angular 2找到内联编辑的示例或指针。我在Angular 1中找到了一些非常好的示例，例如Inline edit demo (angular 1.0)。但是我很难找到类似于Angular 2的例子。我基本上需要达到类似于这个例子的结果。对于Angular 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>

Answer 1

您的代码几乎就在那里。在*ngFor循环中，您正在循环userList。这很好，但是你错过了一个细节。您需要确保每个用户都将属性userEditing设置为false。在您的代码中，您将userEditing作为单个变量来更改所有输入。您希望仅为您单击旁边的用户更改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>

然后在getUserToEdit($event, user.userId)函数中，您需要将userEditing布尔值更改为true，使用特定用户的输入切换文本。

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

_.findIndex是来自lodash的实用函数 - 函数范例库，它提供了许多高阶函数，允许您以更简洁，更抽象的方式编写。帮个忙，开始使用它。

我可能会将userId和userEditing更改为id和editing - 它们已经是user对象的属性 - 让您更轻松你的同事＆＃39;阅读代码时的眼睛。

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

1 个答案: