我如何使用函数访问 ngFor 中的每个元素？

Question

我创建了一个简单的笔记应用程序，它循环遍历保存笔记数据的对象数组。我有一个按钮，可以打开注释进行编辑，单击时返回 true，再次单击时返回 false。

问题是，当单击时，所有注释都会在编辑模式下打开，因为布尔变量是共享的。

问题是：“我如何访问我单击编辑按钮的特定注释？”

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

用你的标题和你自己的话来说，你在问：我如何使用函数访问 ngFor 中的每个元素？和“我如何访问我单击编辑按钮的特定注释？”要直接回答这个问题——您可以访问在循环中隐式创建的作用域变量。这就是说，它*ngFor="let note of notes"会创建一个note作用域为循环每次迭代的变量。您已经在分别ngModel在您的绑定<input>和<textarea>注释标题/文本中执行此操作。您还可以将该变量传递给函数，就像处理绑定一样。因此，您可以使用该note变量传递给一个函数，该函数将使用单击的任何注释来调用。例如openNote(note)// HTML<div class="view-notes" *ngFor="let note of notes">&nbsp; <div class="tools">&nbsp; &nbsp; <i&nbsp; class="fa fa-edit" (click)="openNote(note)"></i> // passes the current note you clicked...// TSopenNote(note: any) {&nbsp; // do something with this note, here}这就是你的问题的答案（至少你的问题是直接从标题中提出的）。但是，您的问题似乎询问不止一件事，即与显示/隐藏特定注释（即被单击的注释）有关。请尝试集中您的问题，或者至少在您的帖子中提出与标题相同的问题:)我会回答我认为你在问的问题，看看你在问题中描述的问题；我认为是：“如何只显示我想要编辑的注释；并在编辑时再次单击或编辑其他注释时保存/关闭它？”关于特定注释的显示/隐藏；正如已经指出的，您只是基于单个（由 ）变量返回的所有注释显示/隐藏，这将对您的所有注释产生相同的效果（同时显示/隐藏它们）。booleanthis.editonEdit()鉴于您可以访问循环中数组note内的每个内容，您可以使用组件上的属性来记录当前显示的注释：notes*ngForexport class SomeComponent {&nbsp; currentlyShownNote: any; // use this to store the reference of the note currently open&nbsp; // rest of component code...}然后，您可以简单地检查您的 HTML（如果是currentlyShownNote这个特定的 HTML），并根据此检查显示/隐藏：<textarea type="text" *ngIf="currentlyShownNote === note" ...>然后，showHideNote在组件中创建一个函数来设置单击时显示哪个注释：// HTML<div class="view-notes" *ngFor="let note of notes; index as i">&nbsp; <div class="tools">&nbsp; &nbsp; <i class="fa fa-edit" (click)="showHideNote(note)"></i>...// TSshowHideNote(note: any) {&nbsp; // if there is a currently shown note, save it&nbsp; if (this.currentlyShownNote) {&nbsp; &nbsp; const currentNote = this.currentlyShownNote;&nbsp; &nbsp; this._noteService.updateNote(this.notes.indexOf(currentNote), currentNote.title, currentNote.note);&nbsp; }&nbsp; if (this.currentlyShownNote == note) {&nbsp; &nbsp; &nbsp; this.currentlyShownNote = null;&nbsp; } else {&nbsp; &nbsp; &nbsp; this.currentlyShownNote = note;&nbsp; }}或者，note您可以简单地使用index as i数组中的索引 ( ) 来跟踪显示的注释（类似于删除注释的方式），而不是使用对每个变量的引用：// HTML<div class="view-notes" *ngFor="let note of notes; index as i">&nbsp; <div class="tools">&nbsp; &nbsp; <i class="fa fa-edit" (click)="showHideNote(i)"></i>&nbsp; &nbsp; <i (click)="deleteNote(i)" class="fa fa-trash"></i>&nbsp; </div>&nbsp; <input [disabled]="shownNoteIndex !== i" type="text" [(ngModel)]="note.title" #title>&nbsp; <p *ngIf="shownNoteIndex !== i">{{note.date | noteDate}}</p>&nbsp; <textarea type="text" *ngIf="shownNoteIndex === i" name="body" id="" [(ngModel)]="note.note"></textarea></div>// TSshownNoteIndex?: number; // property to hold the currently shown note indexshowHideNote(noteIndex: number) {&nbsp; // if there is a currently shown note, save it&nbsp; if (this.shownNoteIndex >= 0) {&nbsp; &nbsp; const i = this.shownNoteIndex;&nbsp; &nbsp; this._noteService.updateNote(i, notes[i].title, notes[i].note);&nbsp; }&nbsp; if (this.shownNoteIndex == noteIndex) {&nbsp; &nbsp; this.shownNoteIndex = null;&nbsp; } else {&nbsp; &nbsp; this.shownNoteIndex = noteIndex;&nbsp; }}奖励：为了回到原点，您可以在组件中创建另一个函数，以使您的shownNoteIndex === iand shownNoteIndex !== i（甚至您的currentlyShowNote === note）检查更加简洁：// HTML<div class="view-notes" *ngFor="let note of notes; index as i">&nbsp; <div class="tools">&nbsp; &nbsp; <i class="fa fa-edit" (click)="showHideNote(i)"></i>&nbsp; &nbsp; <i (click)="deleteNote(i)" class="fa fa-trash"></i>&nbsp; </div>&nbsp; <input [disabled]="!isNoteShown(i)" type="text" [(ngModel)]="note.title" #title>&nbsp; <p *ngIf="!isNoteShown(i)">{{note.date | noteDate}}</p>&nbsp; <textarea type="text" *ngIf="isNoteShown(i)" name="body" id="" [(ngModel)]="note.note"></textarea></div>// TS// if you're using the note indexisNoteShown(noteIndex: number) {&nbsp; return this.shownNoteIndex === noteIndex;}// or&nbsp;// if you're using the note referenceisNoteShown(note: any) {&nbsp; return this.currentlyShownNote === note;}

Answer 2

doSomething($event)尝试在 html 中调用该函数并在 ts 文件中将该函数定义为doSomething(event){}

Answer 3

您的编辑标志应该是一个数字，表示应编辑哪个注释。然后，您可以检查列表中的项目是否与编辑编号匹配，并仅显示该项目的编辑。