编辑数据并从数据库检索后立即更新Angular DOM [英] Updating Angular DOM immediately after editing data and retrieving from the database

问题描述

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

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).

需要帮助吗？

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

}

推荐答案

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

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.

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

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

这篇关于编辑数据并从数据库检索后立即更新Angular DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！