如何在按鈕單擊后刪除項目后自動刷新列表

Question

我的后端有一個使用其id刪除文章的路徑，現在在Angular我有這個文章列表，當我點擊它時每行都有一個按鈕我想從數據庫中刪除這篇文章，好我已經完成了這個然后事情是文章列表不自動刷新所以刪除的文章仍然存在

我有2個方法的ArticleService文件：1用於獲取所有文章（這是在啟動應用程序時調用的）和刪除文章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：

<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

在您的文章組件中，您可以在刪除項目的調用完成時在delete方法中添加事件和觸發器，然后在articleListComponent中繼承該事件。 當postListComponent中的方法停止運行時，標識從數組中刪除的元素並從那里刪除它。 您可以在事件中返回，刪除項目的ID並在數組中搜索它。 請記住，從陣列中刪除項目時，對於數組的引用不會刷新視圖。 您必須使用其余項目創建一個新數組。

你可以這樣做

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

Answer 2

您需要再次調用此方法：

getAllPost（）

因為你有一個共享服務deleteArticle（）方法的成功，你可以調用getAllPost（）方法，它將刷新你的列表。

Answer 3

要做到這一點，你必須在ArticleComponent.ts中輸出EventEmitter

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

成功刪除記錄時，使用已刪除的元素ID發出此事件

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中添加（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()
}

希望這會幫助你。