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.
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. –
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 :) –
Im Wesentlichen beinhaltet seine Lösung, ein Modell zu machen - die 'Data' Klasse. Dies ist der empfohlene Weg, um wiederholbare Datenobjekte zu implementieren. – BrianRT