时间戳

首页 > 解决方案 > ngFor 不会呈现我的 obersavle 响应，但它会插入我添加到数组中的旧值？

angular - ngFor 不会呈现我的 obersavle 响应，但它会插入我添加到数组中的旧值？

问题描述

我正在做一个工作项目，我想用新的值更新一个列表，这些值用ngFor.

我要更新的数组：this.openedRecipe.Receptregels

我从我想要添加的新 Receptregels 数组的观察中得到响应。

如果我做

this.openedRecipe.Receptregels = [...this.openedRecipe.Receptregels, ...response];

或者：

this.openedRecipe.Receptregels.push(response[0])

它不会在视图中添加我的回复的新行。

但是，例如，当我这样做时：

this.openedRecipe.Receptregels = [...this.openedRecipe.Receptregels, ...this.openedRecipe.Receptregels[0]];

或者：

this.openedRecipe.Receptregels.push(his.openedRecipe.Receptregels[0])

它会将旧行作为额外行添加到我的视图中...

有人知道如何解决这个问题吗？

解决此问题的旧方法是重新渲染整个视图，然后当您打开一个食谱时，它将包含新行，因为它们已添加到食谱的后端。

但我想在不重新加载整个页面的情况下显示新值

标签： angularobservablengfor

解决方案

由于我不知道您项目中的对象是什么样的，因此我将使用一个简单的示例来做到这一点。

基本上，您必须append将新数据转换为从订阅中获得的旧数据。

我创建了一个返回Observables简单对象的基本服务：

export class AppService{
  public getOldData(){
    return Observable.of([
      {
        name: 'Mark'
      },
      {
        name: 'Jhon'
      },
      {
        name: 'Matt'
      }
      ]);
  }

  public getNewData(){
    return Observable.of([
      {
        name: 'Jimmy'
      },
      {
        name: 'Elys'
      },
      {
        name: 'Sarah'
      }
      ]);
  }
}

组件代码：

  oldData: any;

  constructor(private service: AppService){
    this.service.getOldData()
    .subscribe(res => {
      this.oldData = res;
    });
  }

  public getNewData(){
    this.service.getNewData()
    .subscribe(res => {
      this.oldData  = [...this.oldData, ... res];
    });
  }

<span (click)="getNewData()"> Click me to get new data!</span>
<hr>

<div *ngFor="let d of oldData">
  {{d.name}}
</div>

工作堆栈闪电战：https ://stackblitz.com/edit/angular-sdxldf?file=src%2Fapp%2Fapp.component.html

推荐阅读