Angular 13:删除对api的请求并产生一些影响

Question

我有一个前端应用程序，我已经连接到我的后端，它运行良好，但当我删除带有帖子的div时，它消失得不清楚，我需要添加一些效果，这样我才能看到帖子真的消失在我的眼中。我知道这并不难，但我是Angular的新手，这是我的第一个前端应用

删除帖子方法：

deletePost1(id:number){
this.messageService.delete(id).subscribe(res => {
this.messages = this.messages.filter(item => item.id !== id);
console.log('Post deleted successfully!');
})
}

从服务中删除帖子方法：

delete(id: number) {
return this.httpClient.delete(this.apiURL + 'api/message/' + id, this.httpOptions)
.pipe(
catchError(this.errorHandler)
)
}

Answer 1

您可以使用ngx烤面包机包显示消息

首先使用npm:安装

npm install ngx-toastr

然后将其添加到你的app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { ToastrService } from 'ngx-toastr';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
ToastrModule.forRoot({
tapToDismiss: false,
autoDismiss: true
})
],
providers: [
ToastrService
],
bootstrap: [AppComponent],
schemas: []
})
export class AppModule { }

然后在组件中创建deletePost()，如下所示：

constructor(
private toastr: ToastrService
) { }
deletePost1(id:number) {
this.messageService.delete(id).subscribe(res => {
this.messages = this.messages.filter(item => item.id !== id);
this.toastr.success("Post deleted successfully!", 'success', { timeOut: 2500 });
})
}