角5:新数据与旧数据合并

Question

我非常新的角度，并有一个应用程序，我正在处理的问题。基本上，我们有一个内容组件，它显示通过服务中的API调用获取的一些数据。还有一个标题组件，它有一个搜索表单，它显示了建议的结果列表。单击结果路由到内容组件以显示结果。这仅仅是使用路由来指向内容组件来完成的。

但是，如果您正在查看内容组件中的数据，则搜索某些内容并单击结果，新数据将合并到内容组件中的现有数据中，而不是刷新它。

内容组件调用：

  private getData(): void {
    this.route.params.subscribe(params => {
      this.apiService.getData(params['id']).subscribe(result => {
        this.resultsList = result;
        this.fillDataArray(this.resultsList, params['id']);
      });
    });
  }

不知道我做错了什么，但是任何帮助都是非常感谢的。

Answer 1

我怀疑this.fillDataArray总是将项推送到现有的数组中，而从不清除它。this.fillDataArray中的第一步应该是清除数组，例如使用this.dataArray.length = 0

Answer 2

如果您的resultList是一个数组，您可以简单地设置

 this.resultList = null;

之前，将新数据赋值为

 this.resultList = result;

尝试将您的代码重写为

 private getData(): void {
    this.route.params.subscribe(params => {
      this.apiService.getData(params['id']).subscribe(result => {
        this.resultList = null;
        setTimeout(()=>{
         this.resultList = result;
         this.fillDataArray(this.resultsList, params['id']);
        },1000);

      });
    });
  }

一开始我就认为这是可行的，但如果这能解决你的问题，请告诉我。