javascript - 离开 URL 并返回后，图表中数据丢失。刷新后显示

Question

我的应用程序在首页加载时显示图表中的数据没有问题...但是，当我离开页面并单击导航栏路线并返回时，数据不再显示。我可以在控制台中看到请求成功通过。如果我刷新页面 (CMD+R)，数据和图表会再次显示。

import { Component, OnInit, wtfCreateScope } from '@angular/core';
import { UserService } from 'src/app/shared/user.service';

@Component({
  selector: 'app-ticket-by-status',
  templateUrl: './ticket-by-status.component.html',
  styleUrls: ['./ticket-by-status.component.css']
})
export class TicketByStatusComponent implements OnInit {

  constructor(private service: UserService) { }

  title = 'Tickets by Status';
  type = 'PieChart';
  data = [];
  columnNames = ['Ticket', 'Percentage'];
  options = {};
  width = 1600;
  height = 600;

  ngOnInit() {

    this.service.getNewTickets().subscribe(
      res => {
        this.data.push(['New', +res])
      },
      err => {
        console.log(err);
      }
    ),
    this.service.getOpenTickets().subscribe(
      res => {
        this.data.push(['Open', +res])
      },
      err => {
        console.log(err);
      }
    ),
    this.service.getPendingTickets().subscribe(
      res => {
       this.data.push(['Pending', +res])
      },
      err => {
        console.log(err);
      }
    ),
    this.service.getSolvedTickets().subscribe(
      res => {
        this.data.push(['Solved', +res])
      },
      err => {
        console.log(err);
      }
    )
  }
}

这是 getNewTickets 的示例

  getNewTickets(){
    return this.http.get(this.BaseUri+'/tickets/status/count/New', this.httpOptions)
  }

我可能会重构它们以接受参数并稍后传入“New”、“Solved”等。目前，重点是这张图表。

这是 HTML:

<google-chart #chart  
   [title]="title"  
   [type]="type"  
   [data]="data"  
   [columnNames]="columnNames"  
   [options]="options"  
   [width]="width"  
   [height]="height">  
</google-chart> 

Answer 1

这不是最好的解决方案，但您可以尝试将 *ngIf="data.length > 0"添加到您的 google-chart 调用中。