Updating Angular DOM immediately after editing data and retrieving from the database

问题

Am working on a Single page Application built using Angular 8 on the frontend and Laravel on the backend. It is a CRUD application, on the delete functionality, it is working well by deleting the user of the specific id on the database. After the user of the specific id is deleted, am fetching all the products from the database but I want to update the data on the U.I afresh with the new data (excluding the deleted resource).

Kindly assist?

Show.component.ts file

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);
  }

}

回答1:

In you’re handleDeleteResponse method, there is a data if the data is the userData this.userData = data or it’s simple delete the user id from the array in you’re Js in the subscription of your delete method.

Like:

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

回答2:

Method 1: Define a Subject in your service and subscribe to that subject in the service to receive the data. In the component, change the lifecycle hook to 'onChanges'. As soon as the data in the Subject is received/updated (with the deleted records) ngChanges shall reflect it in the DOM.

Method 2: Track the records on the front-end in the form of list and when the service gives the response of delete as success then delete that very record in the list using ID or any other unique identifier. In this case you need not to populate all the records again.

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

来源：https://stackoverflow.com/questions/56897979/updating-angular-dom-immediately-after-editing-data-and-retrieving-from-the-data