Angular2 ngModelとngForを使用したインライン編集

Question

Angular2でngModelを使用してインライン編集を実装しようとしています。私はngForを使用して反復する必要があり、またngModelも使用する配列を持っています。この配列のインライン編集を適用しようとすると、配列の変数ごとに1つの文字しか編集できません。

実例はhereです。ここで

は私が一緒にngModelとngForを使用しているコンポーネントのコードです：

import {Component} from '@angular/core' 
import {InlineEditComponent} from './inline.component'; 
@Component({ 
    selector: 'inline-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Inline Editing with Angular 2</h2> 
     <inline-edit [(ngModel)]="editableText" (onSave)="saveEditable($event)"></inline-edit> 
    </div> 
    <div> 
     <ul style="margin:5px;"> 
     <li ngFor #arr [ngForOf]="array" [ngForTrackBy]="customTrackBy"> 
     <inline-edit [(ngModel)]="arr" (onSave)="saveEditable($event)"></inline-edit> 
    </li> 
     // <li style="margin:5px;" *ngFor="let arr of array ; let i=index"> 
     // <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit> 
     // </li> 
     </ul> 
    </div> 
    `, 
    directives: [InlineEditComponent] 
}) 
export class InlineApp { 
customTrackBy(index: number, obj: any): any { 
    return index; 
    } 
    editableText = "Click to edit me!"; 
    // Save name to the server here. 
    saveEditable(value){ 
     console.log(value); 
    } 
    array=['bmw','benz','honda']; 
} 

誰も私を助けることができれば、それは素晴らしいことです。

Answer 1

不変でも配列の要素でもある文字列を編集しています。つまり、文字列の値が変更されると、新しい文字列オブジェクトが作成され、配列内の古い文字列が置換され、* ngForがその文字列の新しいコンポーネントを元の文字列と置き換えます。 console.log('on-constructor')をInlineEditComponentのコンストラクタに入れると、文字を追加するたびに呼び出されます。

問題を解決するには、文字列を直接使用しないでください。このようなクラス内でそれらをラップ：

export class Data { 
    name: string; 
} 

、あなたの配列の宣言は次のようになります。これにより

array: Data[] = [ 
    {name:"bwm"}, 
    {name:"benz"}, 
    {name:"honda"} 
]; 

を、変更は名前だけのフィールドに影響を与えますし、ラッパーオブジェクトがまだ同じです。 ngForは再実行されません。

修正plnkr：https://plnkr.co/edit/WwGcLlisjGe1cmZOMHhD?p=preview

Answer 2

あなたは代わりにテンプレート変数への配列項目に直接結合することができます。

ところで

<li *ngFor="let arr of array; let idx=index; ngForTrackBy:customTrackBy"> 
     <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit> 

：あなたのngFor構文がのみ<template>タグに使用することができます。他の要素で使用する場合は、上記の構文が必要です。

これはtamplateに修正すべきhttps://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngFor

Answer 3

も参照してください。

<ul> 
      <li style="margin:5px;" *ngFor="let arr of array ; let i=index; trackBy:customTrackBy"> 
      <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit> 
      </li> 
</ul> 

この関数は、クラスに追加する必要があります

export class{ 

customTrackBy(index: number): any { 
    return index; 
    } 
} 

最終作業コードを：
私は@ VARUNの問題で何が起こっていたたことを考えていた https://plnkr.co/edit/7SSpZDec2N2zjrSUM04X?p=preview