Angular 中的删除方法未删除

Question

我正在尝试在我的第一个 Angular 应用程序中执行一个非常基本的 CRUD，但我在使用 Delete 方法时遇到了问题。没有错误，id 参数在整个应用程序中正确传递（在控制台中检查），但项目未被删除。基本上什么都没发生。

“数据库”是我的应用程序 assets 文件夹中名为 notes.json 的文件。它包含多个这样的注释：

[
    {
      "id": "id1",
      "title": "First note",
      "description": "This is the description for the first note",
      "categoryId": "1"
    }
]

这些笔记放在UI中note.component.html中mat-cards.

<div *ngFor="let note of notes">
  <mat-card class="note">
    <mat-card-header>
      <mat-card-title>
        {{ note.title }}
      </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>
        {{ note.description }}
      </p>
    </mat-card-content>
    <button><mat-icon (click)="deleteNote(note.id)">delete</mat-icon></button>
  </mat-card>
</div>

然后，在note.component.ts中，调用了deleteNote方法。正如我上面所说，note.id参数传递正确。

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss'],
})
export class NoteComponent implements OnInit, OnChanges {
  @Input() selectedCategoryId: string;
  notes: Note[];

  constructor(private noteService: NoteService) { }

  ngOnInit() {
    this.noteService.getNotes().subscribe((result) => this.notes = result);
  }

  ngOnChanges() {
    if (this.selectedCategoryId) {
      this.noteService.getFilteredNotes(this.selectedCategoryId).subscribe((result) => this.notes = result);
    }
  }

  deleteNote(id:string){
    console.log(id);
    this.noteService.deleteNote(id).subscribe(data => {console.log(data);});
  }
}

export interface Note {
  id: string;
  title: string;
  description: string;
  categoryId: string;
}

该服务因此被调用并执行以下操作：

@Injectable()
export class NoteService {

  readonly baseUrl = "https://localhost:4200";
  readonly httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    })
  };
  deleteNote(id:string)
  {
    return this.httpClient.delete(this.baseUrl + "/notes/" + id, this.httpOptions).subscribe(data => {console.log(data)});
  }

}

所以，到底是哪里出了问题？我的直觉告诉我，我使用的 subscribe 方法是错误的，但我尝试了不同的做法，但仍然得到相同的结果。

Answer 1

所以问题是您发送了从后端删除该注释的请求，但是在前端您的列表永远不会更新。

deleteNote(id:string){
    console.log(id);

    let indexToBeRemoved = this.notes.findIndex( (note) => {note.id === id});
   
    if (indexToBeRemoved != -1){
    this.notes.splice(indexToBeRemoved, 1);
    }
    
    this.noteService.deleteNote(id).subscribe(data => {console.log(data);});
  }
}

如果您想 100% 安全，请检查后端显示删除成功的响应，然后继续从前端删除元素

Angular 中的删除方法未删除

Delete method in Angular is not deleting

html

service

http-delete

typescript

angular