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

Question

我有一个连接到后端的前端应用程序，它运行良好，但是当我用 post 删除 div 时，它就消失了，我需要添加一些效果，所以我可以看到那个post真的消失在我的眼前了。我知道这并不难，但我是 Angular 的新手，这是我的第一个前端应用程序

删除Post方法：

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

从服务中删除 post 方法：

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

Answer 1

您可以使用 ngx-toaster 程序包显示消息

首先使用 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 });

    })
}

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

Angular 13: Delete request to api with some effects

frontend

typescript

angular