Как автоматически обновить список после удаления элемента нажатием кнопки

Question

У меня есть бэкэнд с маршрутом для удаления статьи с использованием ее идентификатора, теперь в Angular у меня есть этот список статей, и в каждой строке есть кнопка, когда я нажимаю на нее, я хочу удалить эту статью из базы данных, хорошо, яПосле выполнения этого НО список статей не обновляется автоматически, поэтому удаленная статья все еще там

У меня есть файл ArticleService с 2 методами: 1 для получения всех статей (это вызывается, когдаприложение запущено) и удалить статью один, я хочу, чтобы после того, как я успешно удалил статью, список статей больше не показывает, что статья без меня, чтобы вручную обновить страницу

это мой файл ArticleService:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { Article } from '../models/article';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {
  private url: string;
  constructor(private _http:HttpClient) {
    this.url = 'http://localhost:3000/api/';
  }

  getArticles(){
    let headers = new HttpHeaders().set('Content-Type', 'application/json');
    return this._http.get(this.url + 'get-articles', {headers:headers});
  }
  deteleArticle(id:any){
    console.log('Voy a borrar el articulo con id ' + id);
    let headers = new HttpHeaders().set('Content-Type', 'application/json');
    return this._http.delete(this.url + 'delete-article/' + id, {headers:headers});
  }
}

HTML-компонент Article:

<div class="actions-container" id="deletebtn">
        <button mat-icon-button color="warn" (click)="deleteArticle(data._id)">
            <mat-icon>delete_forever</mat-icon>
        </button>
    </div>

ArticlesListComponent.html

<mat-list>
    <mat-list-item *ngFor="let article of data_array">
        <app-article [data]='article'></app-article>
    </mat-list-item>
</mat-list>

ArticleComponent.ts

import { Component, OnInit,Input } from '@angular/core';
import { DatePipe } from '@angular/common';
import { ArticleService } from '../shared/article.service';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css']
})
export class ArticleComponent implements OnInit {
  @Input() data: any;
  constructor(
    private datePipe: DatePipe,
    private _articleService: ArticleService) { }

  ngOnInit() {
  }

  public deleteArticle(id):void{
    this._articleService.deteleArticle(id).subscribe(response=>{
      console.log(response);
    },error=>{
      if(<any>error){
        console.log(error);
      }
    });
  }
}

и ArticlesListComponent.ts

import { Component, OnInit } from '@angular/core';
import { ArticleService } from '../shared/article.service';

@Component({
  selector: 'app-articles-list',
  templateUrl: './articles-list.component.html',
  styleUrls: ['./articles-list.component.css'],
  providers:[ArticleService]
})
export class ArticlesListComponent implements OnInit {

  public data_array = [];
  constructor(private articleService: ArticleService) { }

  ngOnInit() {
    console.log('Article-List component ready.');
    this.getAllPost();
  }

  getAllPost(){
    this.articleService.getArticles().subscribe(
      result => {
        this.data_array = result['articles'];
      },
      error=>{
        console.log(error);
      }
    );
  }
}

Как мне сделать обновление списка или после удаления статьи

Answer 1

Вам нужно снова вызвать этот метод:

getAllPost ()

Поскольку у вас есть служба общего доступа, благодаря успешному методу deleteArticle () вы можете вызвать метод getAllPost () , он обновит ваш список.

Answer 2

Для этого вы должны сделать вывод EventEmitter в ArticleComponent.ts

 @Output() public handleDelete: EventEmitter<any> = new EventEmitter<any>();

Создать это событие с идентификатором удаленного элемента при успешном удалении записи.

public deleteArticle(id):void{
    this._articleService.deteleArticle(id).subscribe(response=>{
    this.handleDelete.emit(id);  
      console.log(response);
    },error=>{
      if(<any>error){
        console.log(error);
      }
    });
  }

В ArticlesListComponent.html add (handleDelete) = "deleteHandle ($ event)"

 <mat-list>
        <mat-list-item *ngFor="let article of data_array">
            <app-article [data]='article' (handleDelete)="deleteHandle($event)"></app-article>
        </mat-list-item>
    </mat-list>

В ArticleComponent.ts добавьте метод deleteHandle, в котором мы можем либо удалить удаленный элемент из data_array, чтобы предотвратить другой вызов сервера, либо вы можете вызвать getAllPost (), который обновит список

deleteHandle(id)
{
    var index = data_array.indexOf(e => e._id ==id);

    if (index > -1) {
       data_array.splice(index, 1);
    }
}

или

deleteHandle(id)
{
   this.getAllPost()
}

надеюсь, это поможет вам.

Answer 3

В компоненте article вы можете добавить событие и триггер в методе delete после завершения вызова для удаления элемента, а затем добавить в него событие в articleListComponent.Когда метод в articleListComponent, приписанный событию, запускается, идентифицирует элемент, который был удален из массива, и также удаляет его оттуда.Вы можете вернуть в событии идентификатор удаленного элемента и найти его в массиве.Помните, что ваше представление не будет обновляться для ссылки на массив при удалении элемента из массива.Вам нужно будет создать новый массив с оставшимися элементами.

Вы можете сделать это так

  this.data_array  = [...this.data_array];