时间戳

首页 > 解决方案 > 检索从 Angular 中的函数返回的值

angular - 检索从 Angular 中的函数返回的值

问题描述

我想使用 chart.js 和 ng2chart 在 Angular 中创建一个图表。我创建了一个函数来计算要传递给图表的值，但我不能这样做，如下面的代码所示，因为我会在初始化之前使用属性“在线”。我可以将onlineNumber()函数返回的值传递给 my的另一种方法是什么doughnutChartData？这是功能：

online: number;
term: number;
doughnutChartData = [this.online, this.term];

onlineNumber() : number {
    this.memberService.onlineUsers().subscribe((number: number) => {
      this.online = number;
    })
    return this.online;
  }

userNumber() {
     this.memberService.userNumber().subscribe((number: number) => {
      this.term = number;
    })
  }

的HTML：

 <div style=" margin-top: -6%; margin-left:15%; width: 50%;">
                                <canvas baseChart 
                                [data]="doughnutChartData"
                                [labels]="doughnutChartLabels"
                                [chartType]="doughnutChartType"
                                ></canvas>
 </div>

标签： angularchart.jsng2-charts

解决方案

您有完整的工作示例吗？

我的猜测是在订阅中初始化 donutChartData：

online: number;
doughnutChartData;

onlineNumber() : number {
  this.memberService.onlineUsers().subscribe((number: number) => {
    this.online = number;
    doughnutChartData = [this.online, 9];
  });
  return this.online;
}

更新答案：添加另一种方法来初始化 DoughnutChartData 并在 userNumber 和 onlineNumber 中使用它：

initializeDoughnutChartData() {
    if (this.online != undefined && this.term != undefined) {
        this.doughnutChartData = [this.online, this.term];
    }
}

在 userNumber 和 onlineNumber 中调用此方法：

onlineNumber() : number {
    this.memberService.onlineUsers().subscribe((number: number) => {
      this.online = number;
      this.initializeDoughnutChartData();
    })
    return this.online;
}

userNumber() {
    this.memberService.userNumber().subscribe((number: number) => {
      this.term = number;
      this.initializeDoughnutChartData();
    })
}

推荐阅读