我如何使用函数访问 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">

  <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

}

这就是你的问题的答案（至少你的问题是直接从标题中提出的）。

但是，您的问题似乎询问不止一件事，即与显示/隐藏特定注释（即被单击的注释）有关。请尝试集中您的问题，或者至少在您的帖子中提出与标题相同的问题:)

我会回答我认为你在问的问题，看看你在问题中描述的问题；我认为是：

“如何只显示我想要编辑的注释；并在编辑时再次单击或编辑其他注释时保存/关闭它？”

关于特定注释的显示/隐藏；正如已经指出的，您只是基于单个（由 ）变量返回的所有注释显示/隐藏，这将对您的所有注释产生相同的效果（同时显示/隐藏它们）。booleanthis.editonEdit()

鉴于您可以访问循环中数组note内的每个内容，您可以使用组件上的属性来记录当前显示的注释：notes*ngFor

export class SomeComponent {

  currentlyShownNote: any; // use this to store the reference of the note currently open

  // 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">

  <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;

  }

}

或者，note您可以简单地使用index as i数组中的索引 ( ) 来跟踪显示的注释（类似于删除注释的方式），而不是使用对每个变量的引用：

// 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;

  }

}

奖励：为了回到原点，您可以在组件中创建另一个函数，以使您的shownNoteIndex === iand shownNoteIndex !== i（甚至您的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;

}

Answer 2

doSomething($event)尝试在 html 中调用该函数

并在 ts 文件中将该函数定义为doSomething(event){}

Answer 3

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