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

我的应用程序在第一页加载时显示图表中的数据，没有问题。。。但是，当我离开页面并单击导航栏路线返回时，数据不再显示。我可以在控制台中看到请求成功通过。如果我刷新页面（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> 

不是最好的解决方案，但你可以尝试将*ngIf=“data.length>0”添加到你的谷歌图表调用中。

不是最好的解决方案，但你可以尝试将*ngIf=“data.length>0”添加到你的谷歌图表调用中。

你能将你的示例打包到stackblitz或其他东西中吗=“data.length>3”获取显示的数据，当我做>1时，我只得到1个结果。在这种情况下，总是会有4个结果，所以技术上可行，但感觉脏哈哈。*ngIf=“data.length>3”获取显示的数据，当我做>1时，我只得到1个结果。在这种情况下，总是会有4个结果，所以技术上可行，但感觉脏哈哈。