TS 如何在方法中使用 class 变量？

Question

这让我发疯。我知道这一定是我错过的一些非常愚蠢的东西，但是在仔细阅读论坛并用 google 疯狂搜索了半天之后，我放弃了！请帮忙。这是我第一个使用 Angular 的应用程序，我似乎并不擅长它。

我有一个 class var stats4Graphs 是我从 .net core 3.1 中的服务收到的。我知道该服务有效，因为当我在组件的 html 部分使用 stats4Graphs 时，它会正确显示数据。但是，当我在调用服务的函数中检索数据时，我无法使用该变量，即使是像 console.log('Labels in: ' + this.stats4Graphs.label); 这样的小事也无法使用，因为控制台显示 "Labels 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不在订阅范围内。因为服务 returns 的 getEngagement() 方法看起来像是一个 Observable，所以您需要做的就是在订阅中设置您的值，或者设置 stats4Graphs class支持 Observable<Stats4Graphs> 并在模板中使用 async 管道，如下所示：

stats4Graph: Observable<Stats4Graph>;

ngOnInit() {
  this.stats4Graph = this.profileService.getEngagement('UC__8h96Jwsaptaqh227Q9gg');
}

<div *ngIf="stats4Graph | async; let graph">
  <!-- now you can use `graph` as your value of the Observable -->
</div>

使用此方法，您不必主动订阅服务的getEngagement方法，并且async管道会在您的组件销毁后自动处理取消订阅。

Answer 2

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

希望对您有所帮助

TS 如何在方法中使用 class 变量？

TS how can I use a class variable inside method?

javascript

typescript

chart.js

angular-chart

angular