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

我想找到Angular 2内联编辑的示例或指针。我在Angular 1中找到了一些非常好的示例，例如Inline edit demo (angular 1.0)。但是我正在努力寻找类似于Angular 2的示例。我基本上需要达到类似于此示例中的结果。当谈到Angular 2（1或2）时，我是一个完全新手，所以任何帮助都非常感激。* ngFor循环内的Angular 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>

来源

2017-02-13 Ross

现在正在为此解决此问题。 – Zze

你几乎在那里与你的代码。在您的*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对象的属性 - 阅读代码时更容易对你和你的同事们的眼睛。

来源

2017-02-14 07:58:44 codeepic

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

回答

相关问题