如何使用angular2将数据更改为子组件？

Question

i'm trying to build angular2 component which draws chart (using jquery plot)

import {Component, ElementRef, Input, OnChanges} from 'angular2/core';

@Component({
  selector: 'flot',
  template: `<div>loading</div>`
})

export class FlotCmp  implements OnChanges{

  private width = '100%';
  private height = 220;
  static chosenInitialized = false;

  @Input() private  options: any;
  @Input() private  dataset:any;
  @Input() private  width:string;
  @Input() private  height:string;


  constructor(public el: ElementRef) {}



  ngOnChanges() {
      if(!FlotCmp.chosenInitialized) {
        let plotArea = $(this.el.nativeElement).find('div').empty();
        plotArea.css({
            width: this.width, 
            height: this.height
        });

        $.plot( plotArea, this.dataset, this.options);    
        FlotCmp.chosenInitialized = true;
      }
  } 
}  

Component getting chart "data" property as input parameter:

      <flot  [options]="splineOptions" [dataset]="dataset" height="250px" width="100%"></flot>

So far i managed to make it work as long as "dataset" is static variable.

 this.dataset = [{label: "line1",color:"blue",data:[[1, 130], [3, 80], [4, 160], [5, 159], [12, 350]]}];

My problem is to make it work when data came as a promise:

export class App implements OnInit {

  private dataset:any;
  public entries;  
  getEntries() {
    this._flotService.getFlotEntries().then(
                       entries => this.dataset[0].data = entries,
                       error =>  this.errorMessage = <any>error);
  } 

  ngOnInit() {  
    this.getEntries() 
  } 



  constructor(private _flotService:FlotService) {
    this.name = 'Angular2'
    this.splineOptions = {
            series: {
                lines: { show: true },
                points: {
                    radius: 3,
                    show: true
                }
            }
    };
    this.dataset = [{label: "line1",color:"blue",data:null]}];

  }

}

For some reason data change cannot project to "flot" component

here is link to plunk

Please help

Answer 1

The problem is

entries => this.dataset[0].data = entries,

because only the inner state of the bound value is changed and Angular2 change detection doesn't observe the content only the value or reference itself.

A workaround would be to create a new array with the same content

this._flotService.getFlotEntries().then(
                   entries => {
                     this.dataset[0].data = entries;
                     this.dataset = this.dataset.slice();
                   },

In your case an additional event could work that notifies the child component that updates have happended.

Answer 2

Besides Günter's answer, another option is to implement your own change detection inside ngDoCheck() which will be called when your data comes back from the server:

ngDoCheck() {
   if(this.dataset[0].data !== null && !this.dataPlotted) {
      console.log('plotting data');
      let plotArea = $(this.el.nativeElement).find('div').empty();
      $.plot( plotArea, this.dataset, this.options);    
      this.dataPlotted = true;
   }
}

I feel this is a cleaner approach, since we don't have to write code a specific way just to satisfy/trigger Angular change detection. But alas, it is less efficient. (I hate it when that happens!)

Also, the code you have in ngOnChanges() can be moved to ngOnInit() .

Plunker

As Günter already mentioned, ngOnChanges() isn't called because the dataset array reference doesn't change when you fill in your data. So Angular doesn't think any input properties changed, so ngOnChanges() isn't called. ngDoCheck() is always called every change detection cycle, whether or not there are any input property changes.

---

Yet another option is to use @ViewChild(FlotCmp) in the parent component, which will get a reference to FlotCmp . The parent could then use that reference to call some method, say drawPlot() , on FlotCmp to draw/update the plot when the data arrives.

drawPlot(dataset) {
  console.log('plotting data', dataset);
  let plotArea = $(this.el.nativeElement).find('div').empty();
  $.plot( plotArea, dataset, this.options);
  this.dataset = dataset;
}  

Plunker

This is more efficient than ngDoCheck() , and it doesn't have the issue I described above with the ngOnChanges() approach.

However, if I were to use this approach, I would rework the code somewhat, since I don't like how dataset is currently an input property, but then drawPlot() gets the data passed in via a function argument.