离开 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 调用中。

离开 URL 并返回后，图表中缺少数据。刷新后显示

After leaving URL and coming back data is missing from Chart. Upon refresh, it shows

javascript

google-visualization

typescript

angular