Question

我已经构建了一个CRUD应用程序，该应用程序与REST API进行通信，但在删除一个项目后没有找到刷新视图的方法。我曾经使用过router.navigate在其他方法（如create方法）之后更改视图，这样可以正常工作。

问题是调用delete方法的事件位于相同的项列表中（每个* ngFor项都有自己的删除事件）。因此，如果我删除一个项目，然后我使用router.navigate转到当前视图，它什么也没做，因为你已经在那里，因此即使它已经工作，也没有看到没有删除项目的视图的更新版本。

有没有其他方法可以在不使用route.navigate的情况下刷新视图？

编辑：

我试图实现ChangeDetectorRef，但仍然没有工作......

这是组件：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ApiNoticiasService } from './api-noticias.service';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-noticias',
  templateUrl: 'noticias.component.html',
  styleUrls: ['noticias.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ApiNoticiasService]
})
export class NoticiasComponent implements OnInit {
  noticias: any;

  constructor(
    private cd: ChangeDetectorRef,
    private _apiNoticias: ApiNoticiasService) { }

  ngOnInit() {
    this._apiNoticias.getNoticias()
      .then( (noticias) => this.noticias = noticias)
      .catch((err) => {
        console.log(err);
      });
  }

  deleteNoticia(id){
    this._apiNoticias.deleteNoticia(id)
      .catch((err) => {
      console.log(err);
      });
    this.cd.markForCheck();
  }

}

这是服务中的方法：

deleteNoticia(id) {
    return this._http.delete('http://localhost:3000/noticias/' +id)
      .map((response: Response) => response.json())
      .toPromise()
      .catch((err: any) => {
        console.log(err); 
        return Promise.reject(err);
      });
  }

Answer 1

您正在寻找的主题是变更检测。官方文档似乎还没有谈到它，但是this blog post对它进行了相当深入的解释。

我猜你正在使用推送更改检测，因为默认检查每个事件的所有内容，并且应该已经自动捕获你的删除。您可以删除它并返回默认值，但是您将失去您希望从该设置获得的任何性能提升。

为了保持推送更改检测，与您的问题相关的部分大约是页面的3/4。您需要在显示该项目的组件中注入ChangeDetectorRef，并在删除时调用markForCheck()。

编辑：在查看代码时，问题实际上是您实际上并未更新视图中的数据。服务器可能已删除该项目，但客户端的本地副本仍然存在。

您需要通过适当更改noticias手动删除本地数据，或者从服务器重新获取整批，并使用新获取的结果替换本地缓存，方法与{ {1}}。后一个选项必须在删除承诺的ngOnInit内完成，否则获得正确的结果将受到竞争条件的影响。

Answer 2

实际上你的删除功能应该是这样的。

<input id="autocomplete"  type="hidden">

您需要再次调用ngOnInit（）函数再次获取列表。

Angular 2在没有route.navigate

2 个答案: