Angular - Wie man Inhalte mit einem booleschen Wert für 'dieses' Element in einer ngFor-Schleife ein- und ausblendet

Question

Ich habe eine ngFor-Schleife, die mehrere Listenelemente anzeigt. Jeder Listeneintrag enthält einen Titel. Es enthält auch eine Eingabe mit dem Titel darin, den ich verstecken möchte. Wenn ich eine Bearbeitungsschaltfläche drücke, möchte ich, dass die Eingabe für das ausgewählte Element angezeigt wird, keine der anderen. Was ist der beste Weg, um dies zu erreichen?

Unten ist was ich bisher habe. Wenn Sie jedoch "editItem" initialisieren und "bearbeitbar" auf "true" setzen, wird das Eingabefeld für alle Elemente angezeigt, nicht nur das, auf das ich geklickt habe.

editable = false; 
 

 
editItem(){ 
 
    this.editable = true; 
 
}

<ul> 
 
    <li *ngFor="let item of items | async"> 
 
    <div class="item"> 
 
     <div class="title"> {{ item.item_title }}</div> 
 
     <input #newItemName type="text" [(ngModel)]="this.item.item_title" *ngIf="editable"/> 
 
     <i aria-hidden="true" (click)="editItem()"></i> 
 
    </div> 
 
    </li> 
 
</ul>

würde Jede Hilfe sehr geschätzt :)

Answer 1

Sie können das Problem beheben leicht ^^

html

editItem(item: any){ 
    item.editable = true; 
} 

Typoskript

<ul> 
    <li *ngFor="let item of items | async"> 
    <div class="item"> 
     <div class="title"> {{ item.item_title }}</div> 
     <input #newItemName type="text" [(ngModel)]="this.item.item_title" *ngIf="item.editable"/> 
     <i aria-hidden="true" (click)="editItem(item)"></i> 
    </div> 
    </li> 
</ul> 

Answer 2

können Sie .. eine editMode boolean erstellen und Array von editStates booleans (eine für jedes Element) in component.ts

Dann konvertieren Sie die Funktion, um alle auf false zu setzen, und bearbeiten Sie

• auf Click-Ereignis: editItem, den Index füttern (so in Ihrer ngFor Schleife hinzufügen let i = index) Artikel und verwenden Sie setzen schnell falsche fill Array von Index der Wahl wahr gefolgt.

• auf Hoverout Exit-Ereignis: ExitEditMode.

editItem(index: number) { 
    this.editMode = true; 
    this.editable.fill(false); 
    this.editable[index] = true; 
    } 

    exitEditMode() { 
    this.editMode = false; 
    } 

dann in den HTML-Code können Sie verwenden, um alle ngIf editables zu verbergen, die im Bearbeitungsmodus deaktiviert sind, durch ausgewählt für editMode und bearbeitbare Sondieren. Etwas wie folgt aus:

<ul> 
    <li *ngFor="let item of items | async; let i = index"> 
    <div class="item"> 
     <div class="title"> {{ item.item_title }}</div> 
     <input #newItemName type="text" [(ngModel)]="this.item.item_title" *ngIf="editable"/> 
     <i aria-hidden="true" *ngIf="editMode && editable[i]" (click)="editItem(i)" (mouseout)="exitEditMode()"></i> 
    </div> 
    </li> 
</ul>