ngFor не отображает мой ответ obersavle, но он вставляет старые значения, которые я добавляю в массив? - PullRequest
Новая
       15

ngFor не отображает мой ответ obersavle, но он вставляет старые значения, которые я добавляю в массив?

0 голосов
/ 13 декабря 2018

Я работаю над проектом для работы и хочу обновить список новыми значениями, которые отображаются с помощью ngFor.

Массив, который я хочу обновить: this.openedRecipe.Receptregels

Я получаю ответ от своего наблюдения массива с новыми Receptregels, которые я хочу добавить.

Если я сделаю 

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

или: 

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

itне добавит новые строки моего ответа в представление.

Но когда я сделаю это, например: 

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

Или: 

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

Это добавит старую строку в качестве дополнительной строки к моему представлению ...

Кто-нибудь знает, как это исправить?

Старый способ исправить это - перерисовать весь вид, а затемкогда вы открываете рецепт, он будет содержать новые строки, поскольку они добавлены в бэкэнд к рецепту.

Но я хотел бы показать новые значения без перезагрузки всей страницы

Ответы [ 3 ]

0 голосов
/ 13 декабря 2018

Без вашего реального кода очень сложно воспроизвести проблему.Я использовал BehaviorSubject, чтобы сохранить последние значения при добавлении новых.Вы можете настроить этот код в соответствии с вашими потребностями, перемещая деталь BehaviorSubject внутри вашего component.

Основные части кода 

public updatedData = new BehaviorSubject<any>(null);

public getNewData(){
  const lastValues = this.updatedData.getValue();

  const newValues = [
    { name: 'Jimmy' },
    { name: 'Elys' },
    { name: 'Sarah' }
  ];

  this.updatedData.next([...lastValues || [], ...newValues]);
}

Рабочая демоверсия

0 голосов
/ 13 декабря 2018

Исправлено !!!

Мне нужно было присвоить свой ответ переменной и затем вставить его в this.openedRecipe.Receptregels, если я это сделаю, то это работает, если нет, то это не работает. 

  splitLine(line: Receptregel, recipe: Recept) {
this.recipeService.splitRecipe(line._id, recipe._id);
this.recipeService.updatedRecipe.subscribe(updatedRecipe => {
  const newLine = updatedRecipe.newLines[0];
  const newLine2 = updatedRecipe.newLines[1];
  this.openedRecipe.Receptregels.push(newLine);
  this.openedRecipe.Receptregels.push(newLine2);
  }, err => console.log(err));
}

Так что, в принципе, это работает, настроит немного больше, чтобы быть немного аккуратнее, но это работает.

0 голосов
/ 13 декабря 2018

Поскольку я не знаю, как выглядят объекты в вашем проекте, я буду использовать простой пример для этого.

В основном вам нужно 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>

Работаетstackblitz: https://stackblitz.com/edit/angular-sdxldf?file=src%2Fapp%2Fapp.component.html

...