Angular2 ngModel 및 ngFor를 사용하여 인라인 편집

Angular2에서 ngModel을 사용하여 인라인 편집을 구현하려고합니다. ngFor를 사용하여 반복 할 필요가있는 배열이 있고 ngModel도 사용합니다. 이 배열에 대해 인라인 편집을 적용하려고하면 각 배열의 변수에 대해 하나의 문자 만 편집 할 수 있습니다.Angular2 ngModel 및 ngFor를 사용하여 인라인 편집

작동 예제 here을 찾을 수 있습니다. 누군가가 나를 도울 수 있다면

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']; 
}

것은, 그것은 좋은 것 :

여기에 내가 함께 ngModel 및 ngFor을 사용하고 구성 요소에 대한 코드입니다.

출처

2016-07-05 Varun

변경할 수없고 배열의 직접 요소 인 문자열을 편집하고 있습니다. 즉, 문자열 값이 변경 될 때마다 새 문자열 객체가 만들어져 array에있는 이전 문자열이 대체되고 * ngFor가 해당 문자열에 대한 새 구성 요소를 다시 시작하여 이전 구성 요소를 다시 시작하게됩니다. InlineEditComponent의 생성자에 console.log('on-constructor')을 넣으면 문자를 추가 할 때마다 호출된다는 것을 알 수 있습니다.

문제를 해결하려면 문자열을 직접 사용하지 마십시오.

export class Data { 
    name: string; 
}

다음 배열 선언이 될 것입니다 : 같은 클래스 내에서 랩

이와

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

의 변경 사항은 이름 필드에 영향을 미칠 것이며, 래퍼 객체는 여전히 동일합니다; 따라서 ngFor가 다시 실행되도록 트리거되지 않습니다.

수정 plnkr : https://plnkr.co/edit/WwGcLlisjGe1cmZOMHhD?p=preview이

출처

2016-07-06 01:42:02

... 귀하의 솔루션은 꽤 좋은 그러나 취소의 조치는 더 이상 취소 ... 그것은 여전히 만든 모든 변경 사항을 저장합니다. –

그래, 나는 모든 다른 기능에 온전한 체크를하지 않았으므로 거기에 경고를 써야했습니다. 내 변경 사항은 순수하게 그가 가지고있는 문제를 해결하는 것이 었습니다. –

본질적으로 그의 솔루션은 모델을 만드는 것입니다 - 데이터 클래스. 반복 가능한 데이터 객체를 구현할 때 권장되는 방법입니다. – BrianRT

당신은 배열 항목에 대신 템플릿 변수에 직접 바인딩 할 수 있습니다 : Btw는

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

: 당신의 ngFor 구문은 <template> 태그를 사용할 수 있습니다. 다른 요소에서 사용하는 경우 위에 사용 된 구문이 필요합니다.

도 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngFor

출처

2016-07-06 05:00:35

이것은 tamplate에서 수정해야 참조하십시오.

<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

출처

2016-07-06 19:00:30 Varun

Angular2 ngModel 및 ngFor를 사용하여 인라인 편집

답변

관련 문제