* 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內聯編輯

回答

相關問題