Question

我的后端有一条使用其ID删除文章的路线，现在在Angular中，我有此文章列表，单击时每行都有一个按钮，我想从数据库中删除该文章，好了。已经完成了此操作，然后事情是文章列表没有自动刷新，因此删除的文章仍然存在

我有2种方法的ArticleService文件：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中订阅该事件。当属于该事件的articleListComponent中的方法运行时，请识别从数组中删除的元素，然后从那里也删除它。您可以返回事件，删除该项目的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()
}

希望这会对您有所帮助。

单击按钮删除项目后如何自动刷新列表

3 个答案: