Angular笔记应用：如何在ngFor中定位点击编辑的特定笔记？

Hey there! I see exactly what's going on here—your global edit boolean is causing every note to flip into edit mode when you click any edit button. That's a super common gotcha when sharing a single state variable across a list. Let's fix this so only the clicked note goes into edit mode.

Root Cause #

Right now, all your notes are bound to the same edit variable. When you set this.edit = true, every note checks that same value and switches to edit mode. We need to give each note its own independent edit state instead.

Solution 1: Add an isEditing Property to Each Note #

This is the most straightforward approach—we'll let each note object track whether it's being edited or not.

Step 1: Update Your Note Objects #

First, make sure each note in your notes array has an isEditing property. You can add this when initializing new notes, or set it dynamically when the component loads:

// When loading or creating notes
this.notes.forEach(note => {
  note.isEditing = false; // Start with all notes not in edit mode
});

Step 2: Modify the HTML Template #

Update your template to use the note's own isEditing property instead of the global onEdit() function:

<div class="view-notes" *ngFor="let note of notes; index as i">
  <div class="tools">
    <i class="fa fa-edit" (click)="openNote(note, i)"></i>
    <i (click)="deleteNote(i)" class="fa fa-trash"></i>
  </div>
  <input [disabled]="!note.isEditing" type="text" [(ngModel)]="note.title" #title>
  <p *ngIf="!note.isEditing">{{note.date | noteDate}}</p>
  <textarea type="text" *ngIf="note.isEditing" name="body" [(ngModel)]="note.note"></textarea>
</div>
<h1 class="error" *ngIf="noNotes()">No notes to be displayed.</h1>

Step 3: Rewrite the openNote Function #

Now we'll toggle the specific note's isEditing state instead of using global variables:

openNote(note: any, index: number) {
  if (!note.isEditing) {
    // Turn on edit mode for this note
    note.isEditing = true;
  } else {
    // Save the changes via your service
    this._noteService.updateNote(index, note.title, note.note);
    // Turn off edit mode
    note.isEditing = false;
  }
}

// You can remove the onEdit() function entirely now!

Solution 2: Track the Current Editing Index (No Note Object Changes) #

If you don't want to add extra properties to your note objects (e.g., if they're fetched from an API and you want to keep them clean), you can track the index of the note being edited instead.

Step 1: Add a Component Variable #

Add this to your component class:

currentEditingIndex: number | null = null; // Tracks which note is editing (null = none)

Step 2: Update the HTML Template #

Check if the current note's index matches currentEditingIndex:

<div class="view-notes" *ngFor="let note of notes; index as i">
  <div class="tools">
    <i class="fa fa-edit" (click)="openNote(i)"></i>
    <i (click)="deleteNote(i)" class="fa fa-trash"></i>
  </div>
  <input [disabled]="i !== currentEditingIndex" type="text" [(ngModel)]="note.title" #title>
  <p *ngIf="i !== currentEditingIndex">{{note.date | noteDate}}</p>
  <textarea type="text" *ngIf="i === currentEditingIndex" name="body" [(ngModel)]="note.note"></textarea>
</div>
<h1 class="error" *ngIf="noNotes()">No notes to be displayed.</h1>

Step 3: Rewrite the openNote Function #

Toggle the current editing index and handle saving:

openNote(index: number) {
  if (this.currentEditingIndex === index) {
    // We're already editing this note—save and close
    this._noteService.updateNote(index, this.notes[index].title, this.notes[index].note);
    this.currentEditingIndex = null;
  } else {
    // Switch to editing this note (closes any other open edit)
    this.currentEditingIndex = index;
  }
}

// You can remove the onEdit() function here too!

Which Solution Should You Use? #

• Solution 1 is great if you don't mind adding a small property to your note objects—it's simple and keeps each note's state self-contained.
• Solution 2 is better if you need to keep your note objects untouched (e.g., for API consistency) or want to ensure only one note is editable at a time automatically.

Either way, you'll fix the issue where all notes enter edit mode simultaneously!

内容的提问来源于stack exchange，提问作者Greg