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

Question

我想使用 chart.js 和 ng2chart 在 Angular 中创建图表。我创建了一个函数来计算我想传递给我的图表的值，但是我不能像下面的代码那样那样做，因为我会在它初始化之前使用属性 'online'。我可以将 onlineNumber() 函数返回的值传递给我的 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>

Answer 1

你有完整的工作示例吗？

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

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();
    })
}

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

Retrieve value returned from a function in Angular

chart.js

ng2-charts

angular