Angular中如何正确为delete方法传参？解决note属性不存在错误

问题描述 #

学习Angular已有3-4个月，练习时遇到错误：调用deleteNote(note)方法时触发错误提示Property 'note' does not exist on type 'NoteComponent'。服务文件中的delete方法已将note设为参数，对此感到困惑。

相关代码 #

HTML文件 #

<div class="row">
    <div class="col-md-4" *ngFor="let notes of notesData">
        <div class="card card-body">
            <h5 class="card-title">{{ notes.title }}</h5>
            <p class="text-muted">{{ notes.description }}</p>
                <div class="d-flex align-items-center">
                    <span class="mx-2">
                        <i class="bi bi-pencil-square" data-bs-toggle="modal" 
                        data-bs-target="#editNotesModal"></i>
                    </span>
                    <span class="mx-2">
                    <i class="bi bi-trash" (click)="deleteNote(note)"></i>
                </span>
                </div>
        </div>
    </div>
</div>  

TS文件（NoteComponent） #

export class NoteComponent {
  

  noteForm!: FormGroup;
  notesData: any;
  noteObj: Note = {
    id: '',
    title: '',
    description: ''
  }

  constructor(private fb: FormBuilder, private noteService: NoteService){
    this.noteForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required]
    })
  }

  ngOnInit(){
    this.fetchAllNotes()
  }

  addNote(){
    const { value } = this.noteForm
    console.log(value);

    this.noteObj.id = '',
    this.noteObj.title = value.title,
    this.noteObj.description = value.description

    this.noteService.addNote(this.noteObj).then((note)=>{
      if(note){
        alert("Note Added Successfully")
      }
    })
    this.noteForm.reset()
  }

  fetchAllNotes(){
    this.noteService.getNotes().subscribe((res: Note[])=>{
      console.log(res)
      this.notesData = res;
    })
  }

  deleteNote(note: Note){
    let delConfirm = confirm('Delete current selected Note?');
    if (delConfirm == true){
      this.noteService.deleteNote(note);
    }
  }
}

Service文件（NoteService） #

export class NoteService {

  constructor( private fs: Firestore) { }

  addNote (note: Note){
    note.id = doc(collection(this.fs, 'id')).id
    return addDoc(collection(this.fs, 'Notes'), note)
  }

  getNotes():Observable<Note[]>{
    let notesRef = collection(this.fs, 'Notes')
    return collectionData(notesRef, {idField: 'id'}) as Observable<Note[]>
  }

  deleteNote(note: Note){
    let docRef = doc(collection(this.fs,`Notes/${note.id}`));
    return deleteDoc(docRef)
  }

  updateNote(note: Note, notes: any){
    let docRef = doc(this.fs, `Notes/${note.id}`);
    return updateDoc(docRef, notes)
  }

}

Model文件（Note接口） #

export interface Note {
    id: string,
    title: string,
    description: string
}

错误原因及解决方案 #

错误原因 #

HTML模板中*ngFor循环的变量名是notes，但点击删除时传递的参数是note——这个note在当前组件上下文中并未定义，因此触发了Property 'note' does not exist的错误。

解决方案 #

有两种规范的修改方式：

1. 直接匹配循环变量名：
   将HTML中的(click)="deleteNote(note)"改为(click)="deleteNote(notes)"

2. 修正循环变量名（更推荐，语义更清晰）：
   将*ngFor="let notes of notesData"改为*ngFor="let note of notesData"，保持(click)="deleteNote(note)"不变，单数变量名对应单个笔记数据，避免语义混淆。

额外优化：服务方法修正 #

当前服务中的deleteNote方法存在路径写法错误，doc(collection(this.fs,Notes/${note.id}))应改为直接定位文档的写法，修正后：

deleteNote(note: Note){
  let docRef = doc(this.fs, `Notes/${note.id}`);
  return deleteDoc(docRef)
}

内容的提问来源于stack exchange，提问作者kaiszn