TS如何在方法内部使用类变量？

Question

这让我发疯。我知道这一定是我真正想念的东西，但是在仔细阅读了论坛并疯狂地用Google搜索了半天后，我放弃了！请帮忙。这是我使用Angular的第一个应用程序，似乎我不擅长。

我有一个从.net core 3.1中的服务接收的var stats4Graphs类。我知道该服务有效，因为当我在组件的html部分中使用stats4Graphs时，它将正确显示数据。但是，当我在调用服务的函数中检索数据时，我无法使用该变量，甚至对于诸如console.log('Labels in: ' + this.stats4Graphs.label);这样的琐碎事情也无法使用，因为控制台向我显示了“ Label in：undefined”，我不知道其他事情。

这是我的stats4Graphs模型

    export class Stats4Graphs {
    axisLabels: string[] = [];
    label: string;
    points: number[] = [];
}

我不知道是否需要在这里初始化数组，这只是我拼命尝试的一项。

这是我的component.ts

import { Component, OnInit } from '@angular/core';
import { Stats4Graphs } from 'src/app/shared/models/stats4-graphs.model';
import { ProfileService } from '../profile.service';

@Component({
  selector: 'app-engagement-chart',
  templateUrl: './engagement-chart.component.html',
  styleUrls: ['./engagement-chart.component.css']
})
export class EngagementChartComponent implements OnInit {  

  public stats4Graphs: Stats4Graphs = new Stats4Graphs();

  // ADD CHART OPTIONS. 
  chartOptions = {
    responsive: true    // THIS WILL MAKE THE CHART RESPONSIVE (VISIBLE IN ANY DEVICE).
  }

  labels =  [];

  // STATIC DATA FOR THE CHART IN JSON FORMAT.
  chartData = [
    {
      label: '',
      data: [] 
    }
  ];

  // CHART COLOR.
  colors = [
    { // 1st Year.
      backgroundColor: 'rgba(77,83,96,0)',
      borderColor: 'rgba(77,83,96,0.2)',
      borderWidth : 2
    }
  ]

  // CHART CLICK EVENT.
  onChartClick(event) {
    console.log(event);
  }
  constructor(private profileService: ProfileService) { }

  ngOnInit() {
    this.profileService.getEngagement('UC__8h96Jwsaptaqh227Q9gg')
    .subscribe(stats4Graphs => {
      this.stats4Graphs = stats4Graphs;
    });
    //this.chartData = this.stats.points as any [];
    //this.chartData = this.stats.label as any;
    console.log('Labels in engagement: ' + this.stats4Graphs.label);
    this.labels = this.stats4Graphs.axisLabels as any;
  }

}

[您可以看到我想要做的是一个折线图（使用Chart.js和ng2-charts），该折线图将显示stats4Graphs中包含的数据。我也不怎么想从stats4Graphs.points和stats4Graphs.label到chartData的数据，如果可以帮助我，也将非常有用。

但是现在，我怎么知道该服务真正起作用了？因为我可以在component.html中使用它，它显示了来自服务的值。

<p>{{ stats4Graphs.label }}
        <br />
        {{ stats4Graphs.axisLabels }}
        <br />
        {{ stats4Graphs.points }}
    </p>

感谢您的所有帮助

Answer 1

console.log('Labels in: ' + this.stats4Graphs.label);是undefined，因为对this.profileService.getEngagement('UC__8h96Jwsaptaqh227Q9gg')的调用是异步的，因此尚未完成。

正确的方法是将语句放入subscribe中>

this.profileService.getEngagement('UC__8h96Jwsaptaqh227Q9gg')
  .subscribe(stats4Graphs => {
    this.stats4Graphs = stats4Graphs;

    console.log('Labels in engagement: ' + this.stats4Graphs.label);
    this.labels = this.stats4Graphs.axisLabels as any;
  });
希望有帮助

Answer 2

您正在订阅之外的console.log。由于服务的getEngagement()方法看起来返回一个Observable，因此您所需要做的就是在订阅中设置值，或将stats4Graphs类属性设置为Observable<Stats4Graphs>并使用async模板中的管道，如下所示：