использовать значения из наблюдаемых в угловых, когда они готовы - PullRequest
Новая
       10

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

0 голосов
/ 20 февраля 2019

Я получаю данные из observable, а затем манипулирую ими.

Моя настоящая проблема заключается в том, что когда я использую данные из observable после вызова, они никогда не поступают.

Но когда я утешаю.регистрировать результат внутри subscribe() метода в момент получения данных.

Я думал, что Angular снова вызовет lifecyclehooks при получении данных, но это не тот случай. 

refreshData() {

  this.apiService.retrieveIndicatorHistory(this.indicatorName, this.currentPeriod).subscribe(res => {
    this.values$.push(res);
    console.log("values",res)
  });
}

ngOnInit() {
  this.refreshData();
  ... few steps after
  console.log("values are here", this.values$); // always empty
}

Затем я попыталсяпоказывать значения внутри Onchange также, но данные никогда не печатаются 

ngOnChanges() {
  console.log("values are here", this.values$);
  // manipulate data
}

Как я могу манипулировать значениями, которые я получаю из наблюдаемых, когда они готовятся?Должен ли я поместить всю свою бизнес-логику в subscribe()?

Ответы [ 3 ]

0 голосов
/ 20 февраля 2019

RxJS Observable работает асинхронно, он отправляет данные один раз после получения.Таким образом, ввод и вывод будут наблюдаемыми.Чтобы прочитать наблюдаемые данные, сначала нужно подписаться на них. 

refreshData() {

  this.apiService.retrieveIndicatorHistory(this.indicatorName, this.currentPeriod).subscribe(res => {
    this.values$.push(res);
    this.processData();
  });
}

ngOnInit() {
  this.refreshData();
}

processData(){
  console.log(this.values$); // you can access data here.
}
0 голосов
/ 20 февраля 2019

Вы не должны помещать бизнес-логику в подписку.В общем, вся бизнес-логика должна быть помещена в pipe ().И вы можете подписаться на наблюдаемый напрямую в hTML, используя асинхронный канал.

Так что в html должно быть: 

 <ul *ngFor="let value of (values$ | async)">
  <li>{{value}}</li>
 </ul>

и внутри component.ts: 

values = []
values$ = this.apiService.retrieveIndicatorHistory(this.indicatorName, this.currentPeriod).pipe(
  map(res => {
    this.values.push(res);
    return this.values
  })
)
0 голосов
/ 20 февраля 2019

Да, это асинхронный вызов, и подписчик точно будет знать, когда поступят данные, все в ngOnInit будет выполнено и не будет ждать этого.

В противном случае вы можете использовать (асинхронно, ожидайте) комбинацию

...