1

Ich versuche, Inline-Bearbeitung mit ngModel in Angular2 zu implementieren. Ich habe ein Array, das mit ngFor iteriert werden muss und verwendet auch ngModel. Wenn ich versuche, die Inline-Bearbeitung für dieses Array anzuwenden, kann ich nur ein Zeichen für jede der Variablen des Arrays bearbeiten.Angular2 Inline-Bearbeitung mit ngModel und ngFor

Sie können ein funktionierendes Beispiel here finden.

Hier ist der Code für die Komponente, wo ich bin mit ngModel und ngFor zusammen:

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

Wenn jemand mir helfen könnte, wäre es toll.

Antwort

2

Sie bearbeiten die Strings, die sowohl unveränderbare als auch direkte Elemente des Arrays sind. Das bedeutet, dass der String-Wert immer dann geändert wird, wenn ein neues String-Objekt erstellt wird und die alte Zeichenfolge im Array ersetzt wird, was dazu führt, dass * ngFor eine neue Komponente für diese Zeichenfolge neu initialisiert, um die alte zu ersetzen. Wenn Sie console.log('on-constructor') im Konstruktor InlineEditComponent setzen, werden Sie sehen, dass es jedes Mal aufgerufen wird, wenn Sie ein Zeichen hinzufügen.

Um Ihr Problem zu beheben, verwenden Sie keine Zeichenfolge direkt. Wickeln Sie sie innerhalb einer Klasse wie folgt aus:

export class Data { 
    name: string; 
} 

dann Array-Deklaration wird:

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

Damit werden die Änderungen nur Namensfeld beeinflussen, und Wrapper-Objekte sind immer noch die gleichen; ngFor wird daher nicht zum erneuten Ausführen ausgelöst.

Modified plnkr: https://plnkr.co/edit/WwGcLlisjGe1cmZOMHhD?p=preview

+0

Ich hatte gedacht, das war, was mit @ Varun das Problem los war ... Ihre Lösung ist ziemlich gut, aber die Aktion des Abbrechens bricht nicht mehr ab ... es speichert immer noch alle Änderungen, die gemacht wurden. –

+0

Ja, ich habe keine Vernunftprüfung an allen anderen Funktionen gemacht, sollte eine Warnung dort setzen. Meine Änderungen waren rein, um das Problem zu lösen, das er hat :) –

+0

Im Wesentlichen beinhaltet seine Lösung, ein Modell zu machen - die 'Data' Klasse. Dies ist der empfohlene Weg, um wiederholbare Datenobjekte zu implementieren. – BrianRT

0

Sie können direkt an das Array-Element binden, anstatt an die Template-Variable:

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

Btw: Ihre ngFor Syntax kann nur auf <template>-Tags verwendet werden. Wenn Sie es für andere Elemente verwenden, ist die oben verwendete Syntax erforderlich.

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

0

auch im tamplate modifiziert werden Dies sollte.

<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> 

Diese Funktionen sollten in der Klasse hinzugefügt:

export class{ 

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

Der letzte Arbeitscode:
https://plnkr.co/edit/7SSpZDec2N2zjrSUM04X?p=preview

Verwandte Themen