Question

我有一个角度服务和一个组件，我试图在点击chartjs图形onclick上调用服务功能。但它给了我错误。这就像下面这样： ERROR TypeError：无法读取未定义的属性'updateTableData'

请帮助，我很多天都会收到此错误。

我的组件代码

import { Component, OnInit, AfterViewInit, Input} from '@angular/core';
import { Chart } from 'chart.js';
import { ComponentinteractionService } from '../componentinteraction.service';

@Component({
  selector: 'app-graph-panel-2',
  templateUrl: './graph-panel-2.component.html',
  styleUrls: ['./graph-panel-2.component.css']
})

export class GraphPanel2Component implements OnInit {
labels = ["January","February", "March","April","May","June","July","August"];
positive = [125, 90, 225, 350, 250, 200, 220, 190];
Negative = [25, 10, 25, 35, 30, 40, 60, 50];
Neutral = [50, 30, 125, 225, 200, 250, 260, 190];
n_a = [700, 770, 525, 270, 330, 300, 310, 400];
chart= [];
activePoint = "";
data1 = "";
datasetIndex = "";
label1 = "";
value1 = "";

constructor(public componentInteraction: ComponentinteractionService) { }

public pictorialGraph(graphType){
    var elem = document.getElementById("canvas");
    elem.parentNode.removeChild(elem);
    document.getElementById('canvas_div').innerHTML = '<canvas style="width: 100%;max-height: 218px;height:218px;" id="canvas">{{ chart }}</canvas>';
    var canvas = document.getElementById("canvas");
    this.chart = new Chart(canvas, {
        type: graphType,
        data: {
        labels: this.labels,
        datasets: [
                    { 
                        label: "Positive",
                        data: this.positive,
                        borderColor: "#30b55a",
                        backgroundColor: "#30b55a",
                        fill: true
                    },
                    { 
                        label: "Negative",
                        data: this.Negative,
                        borderColor: "#ff6384",
                        backgroundColor: "#ff6384",
                        fill: true
                    },
                    {    
                        label: "Neutral",
                        data: this.Neutral,
                        borderColor: "#ffcd56",
                        backgroundColor: "#ffcd56",
                        fill: true
                    },
                    { 
                        label: "N/A",
                        data: this.n_a,
                        borderColor: "#808080",
                        backgroundColor: "#808080",
                        fill: true
                    },
                ]
            },
        options: {
            responsive: false,
            maintainAspectRatio: false,
            legend: {
                display: true
            },
            scales: {
                xAxes: [{
                        display: true,
                        stacked: true
                        }],
                yAxes: [{
                        display: true,
                        stacked: true
                        }]
                    },
                onClick: this.test
        }
    });
}

ngOnInit() {

}

ngAfterViewInit(){
    this.pictorialGraph("bar");

    this.componentInteraction.newGraphFilterSubject.subscribe(
        data=>this.pictorialGraph(data)
    );

    this.componentInteraction.newGraphPanel1Subject.subscribe(
      data=> this.changeGraphData(data)
    );
}

public changeGraphData(data){
    this.positive = [data.positive];
    this.Negative = [data.negative];
    this.Neutral = [data.neutral];
    this.n_a = [data.na];
    this.labels = ["Last Responses"];
    this.pictorialGraph("bar");
}

public test(event){
    console.log(event);
    this.componentInteraction.updateTableData("test");
}

}

我的服务代码

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ComponentinteractionService {
public newGraphFilterSubject = new Subject<any>();
public newTableSubject = new Subject<any>();
public newGraphPanel1Subject = new Subject<any>();

constructor(private http: Http) { }

getGraph(graph){
    this.newGraphFilterSubject.next(graph);
}

changeData(data){
    this.newTableSubject.next(data.data_source);
    this.newGraphPanel1Subject.next(data);
}

updateTableData(data){
  alert(data);
}
}

Answer 1

您尚未在组件中实施AfterViewInit。

export class GraphPanel2Component implements AfterViewInit, OnInit

无法在角度分量图表中调用角度服务功能

1 个答案: