我有一个角度项目，其中有两个“应用程序”，即主应用程序和绘图应用程序。主应用程序路由到处，页面加载良好。图表也可以很好地更新，但是附加到变量{{Classyaverage}}，{{average1}}和{{average2}}的数字不会更新。有什么线索吗？
graph.component.html
<div class="box">
<canvas
class="offset"
id="Chart0"
width="240"
height="240"
>
</canvas>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':Classyaverage>40, 'orange':Classyaverage>20, 'green':Classyaverage>10}">{{Classyaverage}}</h1>
</div>
</div>
<div class="box">
<canvas
class="offset"
id="Chart1"
width="240"
height="240"
></canvas>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':Classyaverage>40, 'orange':Classyaverage>20, 'green':Classyaverage>10}">{{getClass}}</h1>
</div>
</div>
<div class="box">
<canvas
class="offset"
id="Chart2"
width="240"
height="240"
></canvas>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':Classyaverage>40, 'orange':Classyaverage>20, 'green':Classyaverage>10}">{{Classyaverage}}</h1>
</div>
</div>
<div class="box">
<canvas
class="offset"
id="Chart3"
width="240"
height="240"
></canvas>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':Classyaverage>40, 'orange':Classyaverage>20, 'green':Classyaverage>10}">{{Classyaverage}}</h1>
</div>
</div>
<div class="box">
<canvas
class="offset"
id="Chart4"
width="240"
height="240"
></canvas>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':Classyaverage>40, 'orange':Classyaverage>20, 'green':Classyaverage>10}">{{Classyaverage}}</h1>
</div>
</div>
<div class="box" [style.width.vw]="32">
<h1 class = "fontStyleWords" >
This is a test sentece for the simpatico stats2.0 word cards
</h1>
</div>
<div class="box">
<h1 class="fontStyleHeader"> Classyaverage Data</h1>
<canvas
class="offset"
id="Chart5"
width="240"
height="240"
></canvas>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':Classyaverage>40, 'orange':Classyaverage>20, 'green':Classyaverage>10}">{{Classyaverage}}</h1>
</div>
</div>
<div class="box">
<h1 class="fontStyleHeader"> Average2 Data</h1>
<canvas
class="offset"
id="Chart6"
width="240"
height="240"
></canvas>
<div class = "greenline" [style.top.vw]="13"></div>
<div class="limeline" [style.top.vw]="11.15"></div>
<div class="ornageline" [style.top.vw]="9.25"></div>
<div class="redline" [style.top.vw]="5.5"></div>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':average2>40, 'orange':average2>20, 'green':average2>10}">{{average2}}</h1>
</div>
</div>
<div class="box">
<h1 class="fontStyleHeader"> Average1 Data</h1>
<canvas
class="offset"
id="Chart7"
width="240"
height="240"
></canvas>
<div class = "greenline" [style.top.vw]="13.5"></div>
<div class="limeline" [style.top.vw]="11.65"></div>
<div class="ornageline" [style.top.vw]="9.75"></div>
<div class="redline" [style.top.vw]="6"></div>
<div class = "fontStyleHole">
<h1 [ngClass]="{'red':average1>40, 'orange':average1>20, 'green':average1>10}">{{average1}}</h1>
</div>
</div>
<!--This Is a Player Card-->
<div class="box" [style.width.vw]="32" [style.height.vw]="32">
<h1 class="fontStyleHeader"> Player Cards</h1>
<div class = "cardDiv" [style.top.vw]="9">
<img src="../assets/PlayerCard1.png" [style.width.vw]="8">
<div class = "cardDiv" [style.width.vw]=".5" [style.top.vw]="-4.9" [style.left.vw]=".5">
<img src="../assets/Simpatico.png" [style.width.vw]=".8" >
</div>
<div class = "cardDiv" [style.width.vw]=".5" [style.top.vw]="-6.7" [style.left.vw]="-.1"> <h1 class = "cardText">XP</h1></div>
<div class = "cardDiv" [style.width.vw]=".5" [style.top.vw]="-7.5" [style.left.vw]="-.1"> <h1 class = "cardText">{{XP}}</h1></div>
<div class = "cardDiv" [style.width.vw]=".5" [style.top.vw]="-4.3" [style.left.vw]="-.2"> <h1 class = "cardText" [style.font-size.vw]=".4" >BOSS</h1></div>
<div class = "cardDiv" [style.width.vw]="7" [style.top.vw]="-3" [style.left.vw]="-.2"> <h1 class = "cardText" [style.font-size.vw]="1.3" >G. Bazar</h1></div>
<div class = "cardDiv" [style.width.vw]="5" [style.top.vw]="0" [style.left.vw]="0.8"> <h1 class = "cardText" [style.font-size.vw]=".7" >HRS</h1></div>
<div class = "cardDiv" [style.width.vw]="5" [style.top.vw]="0" [style.left.vw]="-.6"> <h1 class = "cardText" [style.font-size.vw]=".7" >{{hours}}</h1></div>
<div class = "cardDiv" [style.width.vw]=".5" [style.top.vw]="1.5" [style.left.vw]=".8"> <h1 class = "cardText" [style.font-size.vw]=".7" >TKS</h1></div>
<div class = "cardDiv" [style.width.vw]="5" [style.top.vw]="1.5" [style.left.vw]="-.6"> <h1 class = "cardText" [style.font-size.vw]=".7" >{{tickets}}</h1></div>
<div class = "cardDiv" [style.width.vw]=".5" [style.top.vw]="3" [style.left.vw]=".8"> <h1 class = "cardText" [style.font-size.vw]=".7" >RNK</h1></div>
<div class = "cardDiv" [style.width.vw]="5" [style.top.vw]="2.3" [style.left.vw]="-.6"> <h1 class = "cardText" [style.font-size.vw]="1.3" >∞</h1></div>
<div class = "cardDiv" [style.width.vw]="4" [style.top.vw]="-4.9" [style.left.vw]="2"> <img src="../assets/Santa-Suit-Finished.png" [style.width.vw]="3" ></div>
</div>
</div>
<!--Player Card End-->
</body>
graph.component.ts
import { Component, OnInit} from "@angular/core";
import { Chart } from 'chart.js';
import {getTheData } from '../DataMagic'
import { Http } from '@angular/http';
@Component({
selector: 'app-graph',
templateUrl: './graph.component.html',
styleUrls: ['./graph.component.css']
})
export class GraphComponent {
constructor() { }
ListLength=20
average1=0
average2=0
datapoint=[]
LabelList=[]
Classyaverage=0
ChartName = 'Chart0'
NumOfCharts = 8//This is where you define the number of charts
ChartNum = 1
ListNum = 0
counter = 0
graphMaxMin = []
hours = 0
tickets = 0
XP = 0
LineChart=[]
public setGraph(getClass){//start
if (getClass.RealTimeDictionary['RandomList1']!=null){
this.Classyaverage=getClass.RealTimeDictionary['RandomList1'][3]
console.log(this.Classyaverage)
this.average1=getClass.RealTimeDictionary['RandomList1'][0]
this.average2=getClass.RealTimeDictionary['RandomList1'][1]
}
while (Object.keys(this.datapoint).length<this.NumOfCharts){
this.datapoint.push([1])
}
while (Object.keys(this.datapoint).length > this.NumOfCharts){
this.datapoint.shift()
}
this.ListNum = 20 // defines the number of data points on the x Axis
this.counter = 0 //Don't Change
while(this.counter<this.NumOfCharts){//while loop that generates
NumOfCharts rangint from 0 - NumOfCharts
var i=0
this.LabelList=[]
this.ChartNum = this.counter
this.ChartName = this.ChartName.slice(0,-1)
this.ChartName = this.ChartName + this.counter
while(i< this.ListNum){
i++
this.LabelList.push('')
}
if(this.ChartNum<6){
this.datapoint[this.ChartNum].push(this.Classyaverage)
this.graphMaxMin[1] = -10
this.graphMaxMin[2] = 90
}
else if(this.ChartNum==6){
this.datapoint[this.ChartNum].push(this.average2)
this.graphMaxMin[1] = -10
this.graphMaxMin[2] = 90
}
else{
this.datapoint[this.ChartNum].push(this.average1)
this.graphMaxMin[1] = -10
this.graphMaxMin[2] = 90
}
if(Object.keys(this.datapoint[this.ChartNum]).length > this.ListNum){
this.datapoint[this.ChartNum].shift()
}
this.counter++
//end
this.LineChart[this.ChartNum] = new Chart(this.ChartName, {
type: 'line',
data: {
labels: this.LabelList,
datasets: [{
backgroundColor: '#232232',
label: '',
data: this.datapoint[this.ChartNum],
pointStyle:'rect',
pointRadius: 0,
fill:false,
lineTension:.5,
borderColor:"#001633",
borderWidth: 6,
}]
},
options: {
layout: {
padding: {
left: -500,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: false,
},
title:{
text:"",
display:false,
},
scales: {
yAxes: [{
display: false,
gridLines:{
color: 'red',
drawBorder: false
},
ticks: {
beginAtZero: false,
min: this.graphMaxMin[1],
max: this.graphMaxMin[2],
}
}],
xAxes: [{
display: false
}]
},
animation: {
duration: 0 // general animation time
},
hover: {
animationDuration: 0 // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
}
});//end of LineChart
}// end of setGraph Function
}
}// end of app
app.component.ts
import { Component, OnInit} from "@angular/core";
import { Http } from '@angular/http';
import {GraphComponent} from './graph/graph.component'
export var url : string = 'http://localhost:8000/MyData';
import {getTheData } from './DataMagic'
import { observable } from 'rxjs';
import { webSocket } from "rxjs/webSocket";
import {PlayercardsComponent} from 'src/app/playercards/playercards.component'
const rangefunction = n => Array.from({length: n}, (value, key) => key)
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
LineChart=[];
dataSource: Object;
average1=0
average2=0
Classyaverage=0
public getClass:getTheData= new getTheData(this.HttpModule);
public graphComponent: GraphComponent= new GraphComponent();
constructor(private HttpModule : Http) { } // end of constructor
public graphloop(){
this.graphComponent.setGraph(this.getClass)
setTimeout(() => { this.graphloop(); }, 1000);
}
ngOnInit(){
this.getClass.GetDataSets("RandomList2,RandomList1,")
this.getClass.SubscribeTo('RandomList2')
this.getClass.SubscribeTo('RandomList1')
this.graphloop()
}
} // end of class AppComponent
app.routs.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {WelcomeComponent} from './welcome/welcome.component';
import {GraphComponent} from './graph/graph.component';
const routes: Routes = [
{path: '', component: WelcomeComponent},
{path: 'graph', component: GraphComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRouters {}