如何使用 function 訪問 ngFor 中的每個元素？

Question

我創建了一個簡單的筆記應用程序，它循環遍歷保存筆記數據的對象數組。 我有一個按鈕，通過在單擊時返回 true 來打開注釋以進行編輯，再次單擊時返回 false。

問題是當單擊所有在編輯模式下打開的注釋時，因為 boolean 變量是共享的。

問題是：“如何訪問我單擊編輯按鈕的特定注釋？”

HTML：

<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]="!onEdit()" type="text" [(ngModel)]="note.title" #title>
  <p *ngIf="!onEdit()">{{note.date | noteDate}}</p>
  <textarea type="text" *ngIf="onEdit()" name="body" id="" [(ngModel)]="note.note"></textarea>
</div>

<h1 class="error" *ngIf="noNotes()">No notes to be displayed.</h1>

功能：

openNote(i: number) {
  if (this.count == 0) {
    // open
    this.edit = true; this.count++;
  } else {
    //save
    this._noteService.updateNote(i, this.notes[i].title, this.notes[i].note);

    //close
    this.count--;
    this.edit = false;
  }
}

onEdit() {
  return this.edit;
}

Answer 1

您的編輯標志應該是一個數字，表示應該編輯哪個注釋。 然后您可以檢查列表中的項目是否與編輯編號匹配並僅顯示該項目的編輯。

Answer 2

嘗試在 html 中使用doSomething($event)調用 function

並將 ts 文件中的 function 定義為doSomething(event){}

Answer 3

在你的標題中，用你自己的話來說，你在問：

如何使用 function 訪問 ngFor 中的每個元素？

和

“如何訪問我單擊編輯按鈕的特定注釋？”

要直接回答這個問題——您可以訪問在循環中隱式創建的作用域變量。

這就是說， *ngFor="let note of notes"在循環的每次迭代中創建一個范圍為您的note變量。

您已經在您的ngModel綁定分別位於注釋標題/文本的<input>和<textarea>中執行此操作。

您也可以將該變量傳遞給函數，就像使用綁定一樣。

因此，您可以使用note變量傳遞給 function，它將使用單擊的任何音符來調用。 例如openNote(note)

// HTML
<div class="view-notes" *ngFor="let note of notes">
  <div class="tools">
    <i  class="fa fa-edit" (click)="openNote(note)"></i> // passes the current note you clicked
...

// TS
openNote(note: any) {
  // do something with this note, here
}

這就是你的問題的回答（至少你的問題是直接從標題中提出的）。

---

但是，您的問題似乎不止問一件事，即與顯示/隱藏特定注釋（即被單擊的注釋）有關。 請盡量保持您的問題集中，或者至少在您的帖子中提出與標題相同的問題：）

我會回答我認為你在問的問題，看看你在問題中描述的問題； 我認為是：

“我怎樣才能只顯示我想編輯的筆記；當我再次點擊編輯時保存/關閉它，或者編輯不同的筆記？”

關於特定筆記的顯示/隱藏； 正如已經指出的那樣，您只是基於單個boolean （由this.edit onEdit()返回的 this.edit ）變量顯示/隱藏所有筆記，這將對所有筆記產生相同的效果（同時顯示/隱藏它們時間）。

看到您可以訪問*ngFor循環中的notes數組中的每個note ，您可以使用組件上的屬性記錄當前顯示的注釋：

export class SomeComponent {
  currentlyShownNote: any; // use this to store the reference of the note currently open
  // rest of component code...
}

然后，您可以簡單地檢查您的currentlyShownNote如果 currentShownNote 是這個特定的，並根據此檢查顯示/隱藏：

<textarea type="text" *ngIf="currentlyShownNote === note" ...>

然后，在您的組件中創建一個showHideNote function 以設置單擊它時顯示的注釋：

// HTML
<div class="view-notes" *ngFor="let note of notes; index as i">
  <div class="tools">
    <i class="fa fa-edit" (click)="showHideNote(note)"></i>
...

// TS
showHideNote(note: any) {
  // if there is a currently shown note, save it
  if (this.currentlyShownNote) {
    const currentNote = this.currentlyShownNote;
    this._noteService.updateNote(this.notes.indexOf(currentNote), currentNote.title, currentNote.note);
  }

  if (this.currentlyShownNote == note) {
      this.currentlyShownNote = null;
  } else {
      this.currentlyShownNote = note;
  }
}

---

或者，您可以簡單地使用數組中的索引 ( index as i ) 來跟蹤顯示的注釋，而不是使用對每個note變量的引用（類似於您刪除注釋的方式）：

// HTML
<div class="view-notes" *ngFor="let note of notes; index as i">
  <div class="tools">
    <i class="fa fa-edit" (click)="showHideNote(i)"></i>
    <i (click)="deleteNote(i)" class="fa fa-trash"></i>
  </div>

  <input [disabled]="shownNoteIndex !== i" type="text" [(ngModel)]="note.title" #title>
  <p *ngIf="shownNoteIndex !== i">{{note.date | noteDate}}</p>
  <textarea type="text" *ngIf="shownNoteIndex === i" name="body" id="" [(ngModel)]="note.note"></textarea>
</div>

// TS
shownNoteIndex?: number; // property to hold the currently shown note index

showHideNote(noteIndex: number) {
  // if there is a currently shown note, save it
  if (this.shownNoteIndex >= 0) {
    const i = this.shownNoteIndex;
    this._noteService.updateNote(i, notes[i].title, notes[i].note);
  }

  if (this.shownNoteIndex == noteIndex) {
    this.shownNoteIndex = null;
  } else {
    this.shownNoteIndex = noteIndex;
  }
}

獎勵：為了回到完整的循環，您可以在組件中創建另一個 function 以使您的shownNoteIndex === i和shownNoteIndex !== i （甚至您的 currentShowNote currentlyShowNote === note ）檢查更加簡潔：

// HTML
<div class="view-notes" *ngFor="let note of notes; index as i">
  <div class="tools">
    <i class="fa fa-edit" (click)="showHideNote(i)"></i>
    <i (click)="deleteNote(i)" class="fa fa-trash"></i>
  </div>

  <input [disabled]="!isNoteShown(i)" type="text" [(ngModel)]="note.title" #title>
  <p *ngIf="!isNoteShown(i)">{{note.date | noteDate}}</p>
  <textarea type="text" *ngIf="isNoteShown(i)" name="body" id="" [(ngModel)]="note.note"></textarea>
</div>

// TS
// if you're using the note index
isNoteShown(noteIndex: number) {
  return this.shownNoteIndex === noteIndex;
}
// or 
// if you're using the note reference
isNoteShown(note: any) {
  return this.currentlyShownNote === note;
}