Как обновить данные компонента с помощью службы 6 angular 6

Question

У меня есть служба угловых данных 6, которая устанавливает наблюдаемую информацию, которая должна использоваться как минимум одним компонентом.

Я пытался следовать шаблонам проектирования, которые существуют для этого типаfeature.

Проблема в том, что, хотя мой компонент, кажется, получает значение по умолчанию, он никогда не обновляет данные.

Служба данных выглядит следующим образом:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, Subscription, fromEvent } from 'rxjs';

@Injectable()
export class CustomerDataService {
  dataURL = 'assets/data/customer_sim_data_rollup.json';
  private customerData = new BehaviorSubject([{"product": "init1", "revenue": 1, "yearmo": 201801}, {"product": "init2", "revenue": 1, "yearmo": 201801}]);
  currentCustData = this.customerData.asObservable()
  // private currentCustData = new Observable();

  constructor(private http: HttpClient) {
    console.log('customer-data-service was called...');
    this.getData();
  }

  getData(yearmo: string): void {
    console.log('getData was called...');
    this.http.get(this.dataURL).subscribe(data => this.updateData(data)));
  }

  filterData(data: any, yearmo: string): any[]{
    return data.filter(d => d['yearmo'] === yearmo);
  }

  updateData(data: any): void{
    data = this.filterData(data, '201801')
    this.customerData.next(data);
  }
}

и компонент выглядит так:

import { Component, OnInit, NgModule, OnChanges, SimpleChanges, Input } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { CustomerDataService } from '../services/customer-data.service';
import { NgxEchartsModule } from 'ngx-echarts';

@Component({
  selector: 'app-treemap',
  templateUrl: './treemap.component.html',
  styleUrls: ['./treemap.component.css']
})
export class TreemapComponent implements OnInit {
  @Input() data: any[];
  results: any[];


  constructor(private custDataService: CustomerDataService) { }

  ngOnInit() {
    this.custDataService.currentCustData.subscribe(data => this.data = data; console.log(this.data););
    this.custDataService.getData('201802');
  }

  ngOnChanges(changes: SimpleChanges): void {
    if( changes['data'] ){
      console.log('the data changed')
      this.results = this.parseData(this.data);
    }
  }

  parseData(data): any[] {
    let parsedData = data.forEach(d => {"name": d["products"], "value": d["revenue"]});
    return parsedData;
  }
}

@NgModule({
  imports:[
    NgxEchartsModule,
  ],
})
export class AppModule { }

Компонент подписывается на наблюдаемое в службе и затем вызывает this.custDataService.getData('201802');.Я ожидал бы, что это и обновит службу, и вызовет ngOnChanges, но ни того, ни другого не происходит.

Выход консоли выглядит следующим образом:

Что я сделал не так?

Answer 1

Поведение правильное.ngOnChanges не сработает при обновлении переменной внутри того же компонента.Все, что вам нужно сделать, это вызвать метод parseData внутри вашей подписки, и он будет работать

this.custDataService.currentCustData.subscribe(data => {
  this.data = data; 
  console.log(this.data);
  this.results = this.parseData(this.data);
});

Примечание: Когда вы передаете данные из шаблона, включая компонент app-treemap, тогда запускается ngOnChanges

<app-treemap [data]="someData"></app-treemap> //this will trigger onChange event

Также внутри вашей подписки вы уже получаете данные, поэтому нет необходимости зависеть от обнаружения изменений