我創(chuàng)建了一個簡單的筆記應(yīng)用程序，它循環(huán)遍歷保存筆記數(shù)據(jù)的對象數(shù)組。我有一個按鈕，可以打開注釋進(jìn)行編輯，單擊時返回 true，再次單擊時返回 false。問題是，當(dāng)單擊時，所有注釋都會在編輯模式下打開，因為布爾變量是共享的。問題是：“我如何訪問我單擊編輯按鈕的特定注釋？”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貢獻(xiàn)1804條經(jīng)驗 獲得超7個贊
用你的標(biāo)題和你自己的話來說，你在問：
我如何使用函數(shù)訪問 ngFor 中的每個元素？
和
“我如何訪問我單擊編輯按鈕的特定注釋？”
要直接回答這個問題——您可以訪問在循環(huán)中隱式創(chuàng)建的作用域變量。
這就是說，它*ngFor="let note of notes"會創(chuàng)建一個note作用域為循環(huán)每次迭代的變量。
您已經(jīng)在分別ngModel在您的綁定<input>和<textarea>注釋標(biāo)題/文本中執(zhí)行此操作。
您還可以將該變量傳遞給函數(shù)，就像處理綁定一樣。
因此，您可以使用該note變量傳遞給一個函數(shù)，該函數(shù)將使用單擊的任何注釋來調(diào)用。例如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
}
這就是你的問題的答案（至少你的問題是直接從標(biāo)題中提出的）。
但是，您的問題似乎詢問不止一件事，即與顯示/隱藏特定注釋（即被單擊的注釋）有關(guān)。請嘗試集中您的問題，或者至少在您的帖子中提出與標(biāo)題相同的問題:)
我會回答我認(rèn)為你在問的問題，看看你在問題中描述的問題；我認(rèn)為是：
“如何只顯示我想要編輯的注釋；并在編輯時再次單擊或編輯其他注釋時保存/關(guān)閉它？”
關(guān)于特定注釋的顯示/隱藏；正如已經(jīng)指出的，您只是基于單個（由 ）變量返回的所有注釋顯示/隱藏，這將對您的所有注釋產(chǎn)生相同的效果（同時顯示/隱藏它們）。booleanthis.editonEdit()
鑒于您可以訪問循環(huán)中數(shù)組note內(nèi)的每個內(nèi)容，您可以使用組件上的屬性來記錄當(dāng)前顯示的注釋：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），并根據(jù)此檢查顯示/隱藏：
<textarea type="text" *ngIf="currentlyShownNote === note" ...>
然后，showHideNote在組件中創(chuàng)建一個函數(shù)來設(shè)置單擊時顯示哪個注釋：
// 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數(shù)組中的索引 ( ) 來跟蹤顯示的注釋（類似于刪除注釋的方式），而不是使用對每個變量的引用：
// 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;
}
}
獎勵：為了回到原點，您可以在組件中創(chuàng)建另一個函數(shù)，以使您的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;
}
九州編程
TA貢獻(xiàn)1785條經(jīng)驗 獲得超4個贊
doSomething($event)嘗試在 html 中調(diào)用該函數(shù)
并在 ts 文件中將該函數(shù)定義為doSomething(event){}
慕沐林林
TA貢獻(xiàn)2016條經(jīng)驗 獲得超9個贊
您的編輯標(biāo)志應(yīng)該是一個數(shù)字，表示應(yīng)編輯哪個注釋。然后，您可以檢查列表中的項目是否與編輯編號匹配，并僅顯示該項目的編輯。
- 3 回答
- 0 關(guān)注
- 218 瀏覽
添加回答
舉報
0/150
提交
取消