Angular 2函数调用* ng用于多次调用

Question

我在一个指令上调用一个函数来渲染图表的系列数据。

import {Directive, Input, OnInit} from '@angular/core';

@Directive({
  selector: '[onCreate]'
})
export class OnCreate implements OnInit{
  @Input() onCreate:Function;
  ngOnInit() {
    console.log('Directive Initialized. The value is: ', this.onCreate);
  }
}

getSeries Data函数被无休止地调用。它应该只被调用15次。我做错了什么？

Dashboard Component.ts

import{ Component , OnInit} from '@angular/core';
import { Router } from '@angular/router';
import {SimpleChartComponent} from "../charts/simpleChart.component";
import {AppleChartComponent} from "../charts/appleChart.component";
import {BarChartComponent} from "../charts/barChart.component";
import {DonutChartComponent} from "../charts/donutChart.component";
import {AlertComponent} from 'ng2-bootstrap/ng2-bootstrap';
import {ModalDemoComponent} from "../modals/modalDemoComponent";
import {NgInitHelperComponent} from "../helpers/nginit.helper.component";
import {ModalDirective} from "ng2-bootstrap/ng2-bootstrap";
import {BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
import {SurveyService} from "../survey/survey.service";


@Component({
  selector: 'dashboard',
  templateUrl: '/app/components/dashboard/dashboard.component.html',
  providers: [BS_VIEW_PROVIDERS],
  directives: [SimpleChartComponent, AppleChartComponent, BarChartComponent, DonutChartComponent, AlertComponent, ModalDemoComponent, NgInitHelperComponent, ModalDirective]
})
export class DashboardComponent implements OnInit {

  public areas:any;
  public seriesData: any[];

  constructor(public router: Router, public surveyService: SurveyService) {

    this.router = router;
    this.surveyService = surveyService;
    this.areas = this.surveyService.questions;
    this.seriesData = [20,40,60,80,100];

  }

  ngOnInit(){

    console.log('Dashboard Component Init!');


  }

  goToDimension(id){

      this.router.navigate(['/dimensions', id]);

  }


  getSeriesData(i){

    console.log('Getting series data', i);
    return [1,2,3,4,5]//this will eventually return data via id etc.


  }
}

Dashboard Component.html

<h1>Welcome to the Dashboard! <i class="fa fa-question-circle-o" (click)="m.show()"></i></h1>
<hr/>
<!--<div class="row">-->
<!--<div class="col-md-12"><bar-chart selector="chart_dashboard" heading="Dashboard"></bar-chart></div>-->
<!--</div>-->
<div class="row">
  <div *ngFor="let i of areas" class="col-sm-12 col-md-12 col-lg-6">
    <div class="row" style="border: 1px solid grey; margin: 30px 0 0 0; padding-bottom: 20px;">

     <div class="col-sm-4 col-md-5">
       <div [onCreate]="getSeriesData(i.id)"></div>
      </div>
      <div class="col-sm-8 col-md-7">
        <h3>This items title the area.</h3>

        <p>Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. </p>

        <div class="text-right">
          <button class="btn btn-primary" (click)="goToDimension(i.id)">Learn More!</button>
        </div>
      </div>

    </div>
    <div class="clearfix"></div>
  </div>
</div>

<modal-demo #m="child"></modal-demo>

参见图像，指令按预期激发15次，但函数调用是无限的。

Answer 1

因此解决了我在init上设置数据的问题。 然后我通过seriesData [i.id]

来查看循环中的数据

<div [seriesData]="seriesData[i.id]"></div>

感谢。