Продолжайте обнаруживать изменения в наблюдаемой, созданной из массива - PullRequest
Новая
       10

Продолжайте обнаруживать изменения в наблюдаемой, созданной из массива

0 голосов
/ 03 мая 2018

У меня есть два компонента, один из которых является родительским, а другой - дочерним. Я передаю массив дочернему элементу, используя @Input, и мне нужно запускать функцию внутри дочернего компонента каждый раз, когда массив обновляется. Я уверен, что это можно сделать с помощью наблюдаемых, но не смог понять, как это сделать. Я могу получить начальное значение массива, но подписка, кажется, закрывается после одного изменения.

Вот ссылка на демонстрацию StackBlitz: https://stackblitz.com/edit/angular-y8sren?file=app%2Fhello.component.ts

parent.component.ts 

arr: any[] = [
  { title: 'Test 1', value: 'Foo' },
  { title: 'Test 2', value: 'Bar' }
];

generateArray() {
  const newArr = [];

  for (let i = 1; i <= 20; i++) {
    newArr.push({ title: 'Item '+ i, value: Math.floor(Math.random() * 123) });
  } 

  this.arr = newArr;
}

child.component.ts 

@Input() arr: any[];

obsArr$: Observable<any[]>;
finalArr: any[] = [];

ngOnInit() {
  this.obsArr$ = Observable.from(this.arr);

  this.obsArr$
    .concatMap(val => Observable.of(val))
    .toArray()
    .subscribe(data => {
      // This needs to be run everytime arr changes to keep data in sync
      // But this gets run only once
      this.finalArr = data;
    },
    console.error
    );
}

1 Ответ

0 голосов
/ 03 мая 2018

Нет необходимости использовать Observables. Просто используйте ngOnChanges ( Docs ), который вызывается при изменении какого-либо связанного с данными свойства директивы.

Просто импортируйте import { OnChanges } from '@angular/core'; и используйте как OnInit: 

ngOnChanges() {
  // do what you want with the ()Input prop whenever the parent modifies it
}
...