В заголовке и своими словами вы спрашиваете:
Как я могу получить доступ к каждому элементу в ngFor с помощью функции?
и
«Как я могу получить доступ к этой заметке c, где я нажал кнопку редактирования?»
Чтобы ответить на этот вопрос напрямую - вы можете получить доступ к переменной scoped это неявно создается в l oop.
То есть, *ngFor="let note of notes" создает переменную note, ограниченную вашей каждой итерацией l oop.
Вы уже делаете это, когда ваша привязка ngModel находится в ваших <input> и <textarea> для заголовка / текста заметки соответственно.
Вы также можете передать эту переменную в функции, так же, как вы делаете это с bindings.
Таким образом, вы можете использовать переменную 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
}
Это ваш вопрос, на который вы ответили (по крайней мере, то, что ваш вопрос прямо задает из заголовка).
Однако ваш вопрос, кажется, задает больше, чем одна вещь, а именно, чтобы показать / скрыть Speci c заметки (т.е. те, которые были нажаты). Пожалуйста, постарайтесь, чтобы ваши вопросы были сосредоточены, или, по крайней мере, задавайте в своем посте тот же вопрос, что и в заголовке:)
Я отвечу на ваши вопросы, глядя на проблему, которую вы задали описано в вашем вопросе; я думаю, что это будет:
"Как я могу показать только заметку, которую я sh могу отредактировать; и сохранить / закрыть ее при повторном редактировании, щелкнуть мышью или редактировать другую заметку?"
Относительно отображения / скрытия указанных примечаний c; как уже указывалось, вы просто показываете / скрываете все заметки на основе одной переменной boolean (this.edit, возвращаемой onEdit()), которая будет иметь одинаковый эффект для всех ваших заметок ( показывать / скрывать их все одновременно).
Поскольку у вас есть доступ к каждому note в вашем массиве notes в вашем *ngFor l oop, вы можете вести учет которых в данный момент отображается примечание с использованием свойства вашего компонента:
export class SomeComponent {
currentlyShownNote: any; // use this to store the reference of the note currently open
// rest of component code...
}
Затем вы можете просто проверить в HTML, является ли currentlyShownNote именно этот, и показать / скрыть на основе этой проверки :
<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 === i и 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;
}