Question

Am正在处理使用前端Angular 8和后端Laravel构建的单页应用程序。它是一个CRUD应用程序，具有删除功能，通过删除数据库中特定ID的用户，它可以很好地工作。删除特定ID的用户后，我正在从数据库中获取所有产品，但我想用新数据（不包括已删除的资源）重新更新U.I上的数据。

请协助？

Show.component.ts文件

import { Component, OnInit , ViewChild, ElementRef} from '@angular/core';
import { SharedService } from 'src/app/Services/shared.service';
import { AuthService } from 'src/app/Services/auth.service';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import {  SnotifyService } from 'ng-snotify';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {
  public userData : any[];
  public error = null;

  constructor(
    private Shared : SharedService,
    private Auth:AuthService,
    private router: Router,
    private Notify:SnotifyService
    ) { }

  //Update the data when the DOM loads
  ngOnInit() {
    this.Shared.checkAll$.subscribe(message => this.userData = message);
  }

  //Method called when the delete button is triggered from the html
  //Inside it we submit the data to the backend via a service and get
  //the response
  deleteUser(id:number){
    return this.Auth.delete(id).subscribe(
      data => this.handleDeleteResponse(data),
      error => this.handleDeleteError(error)
    );
  }

  //data below contains data from the backend after successful deletion
  handleDeleteResponse(data:any){
    this.Notify.success(`Successfully Deleted in our records`, {timeout:4000});
  }

  handleDeleteError(error:any){
    console.log(error);
  }

}

Answer 1

在handleDeleteResponse方法中，有一个数据，如果该数据是userData this.userData = data，或者只是简单地从订阅了delete方法的Js数组中删除用户ID。

赞：

this.userData = this.userData.filter(user => user.id !== idToDelete )

Answer 2

方法1： 在您的服务中定义一个主题，并在服务中订阅该主题以接收数据。在组件中，将生命周期挂钩更改为“ onChanges”。一旦接收/更新了主题中的数据（带有删除的记录），ngChanges便会将其反映在DOM中。

方法2： 以列表的形式跟踪前端的记录，并且当服务给出成功删除响应时，使用ID或任何其他唯一标识符在列表中删除该记录。在这种情况下，您无需再次填充所有记录。

export class MyComponent implements OnInit, OnChanges {
    ngOnChanges() {
    // code here
    }
    ngOnInit() {
     // code here
    }
}

编辑数据并从数据库检索后立即更新Angular DOM

2 个答案: