我創建了一個簡單的筆記應用程序，它循環遍歷保存筆記數據的對象數組。我有一個按鈕，可以打開注釋進行編輯，單擊時返回 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;}
3 回答
三國紛爭
TA貢獻1804條經驗 獲得超7個贊
用你的標題和你自己的話來說，你在問：
我如何使用函數訪問 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;
}
- 3 回答
- 0 關注
- 182 瀏覽
添加回答
舉報
0/150
提交
取消