时间戳

首页 > 解决方案 > 在使用 {HttpClient} 显示数据之前等待 - 打字稿 - Angular

javascript - 在使用 {HttpClient} 显示数据之前等待 - 打字稿 - Angular

问题描述

4 天以来，我正在尝试显示数据，但没有任何运行。我的目标是从工厂的内部服务器接收数据。所以，一些西门子 CPU 在 CSV 文件中发送数据，我在

线路服务.ts

import {Subject} from 'rxjs';
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';

@Injectable()
export class LineService{

  public lines: RcvData[] = [];

  constructor(private http: HttpClient) {
    this.getData();
  }

  lineSubject = new Subject<any[]>();

  getData(): void {
    const lists: string[] = [
      'assets/donnee-l1.csv',
      'assets/donnee-l2.csv',
      'assets/donnee-l3.csv',
      'assets/donnee-l4.csv',
      'assets/donnee-l5.csv',
      'assets/donnee-l6.csv'
    ];
    for (const list of lists) {
      this.http.get(list, {responseType: 'text'})
        .subscribe(data => {
          const csvToRowArray = data.split('\n');
          const lastRow = csvToRowArray[csvToRowArray.length - 2];
          const row = lastRow.split(',');
          this.lines.push(new RcvData(
            parseInt(row[0], 10),
            row[1], row[2], row[3], row[4], row[5],
            parseInt(row[6], 10),
            parseInt(row[7], 10),
            parseInt(row[8], 10),
            parseInt(row[9], 10),
            parseFloat(row[10]),
            parseFloat(row[11]),
            parseFloat(row[12]),
            parseFloat(row[13]),
            parseFloat(row[14]))
          );
          if(this.lines.length === 6){
            this.isLoading = true;
          }
          console.log(this.isLoading);
          console.log(this.lines.length);
        }, error => {
          console.log(error);
        });
    }
  }

  emitLineSubject(): void {
    this.lineSubject.next(this.lines.slice());
  }
  getLineById(id: number): RcvData{
    const line = this.lines.find(
      (lineObject) => {
        return lineObject.id === id;
      }
    );
    return line;
  }
}

class RcvData{
  id: number;
  date: string;
  utcTime: string;
  refCharge: string;
  refDecharge: string;
  quantiteEnCours: string;
  quantiteHoraireReel: number;
  quantiteHoraireTheorique: number;
  quantitePosteReel: number;
  quantitePosteTheorique: number;
  trpHeureReel: number;
  trpPosteReel: number;
  trpObjectif: number;
  consoAir: number;
  consoElec: number;


  constructor(
    id: number,
    date: string,
    utcTime: string,
    refCharge: string,
    refDecharge: string,
    quantiteEnCours: string,
    quantiteHoraireReel: number,
    quantiteHoraireTheorique: number,
    quantitePosteReel: number,
    quantitePosteTheorique: number,
    trpHeureReel: number,
    trpPosteReel: number,
    trpObjectif: number,
    consoAir: number,
    consoElec: number)
  {
    this.id = id;
    this.date = date;
    this.utcTime = utcTime;
    this.refCharge = refCharge;
    this.refDecharge = refDecharge;
    this.quantiteEnCours = quantiteEnCours;
    this.quantiteHoraireReel = quantiteHoraireReel;
    this.quantiteHoraireTheorique = quantiteHoraireTheorique;
    this.quantitePosteReel = quantitePosteReel;
    this.quantitePosteTheorique = quantitePosteTheorique;
    this.trpHeureReel = trpHeureReel;
    this.trpPosteReel = trpPosteReel;
    this.trpObjectif = trpObjectif;
    this.consoAir = consoAir;
    this.consoElec = consoElec;
  }
}

现在，在这个 .ts 中，我将 CSV 数据拆分为我的 6 条生产线的对象。我为我的 html 页面发送数据，以显示它。我用这个组件读取数据：

单行组件.ts

import { Component, OnInit } from '@angular/core';
import { LineService } from '../services/line.service';
import { ActivatedRoute } from '@angular/router';
import {async} from 'rxjs-compat/scheduler/async';

@Component({
  selector: 'app-single-line',
  templateUrl: './single-line.component.html',
  styleUrls: ['./single-line.component.scss']
})
export class SingleLineComponent implements OnInit {

  name = 'Ligne...';
  status = 'éteint';
  date_jour = '2021-01-01';
  heure_act = '00:00:00';
  reference_charge = 'ST00S00';
  reference_decharge = 'ST11S11';
  quantite_produite = '1/1000';
  quantite_h_reel = 0;
  quantite_h_th = 0;
  quantite_p_reel = 0;
  quantite_p_th = 0;
  trp_h_reel = 0;
  trp_p_reel = 0;
  trp_objectif = 0;
  conso_air = 0;
  conso_elec = 0;

  private activatedRoute: ActivatedRoute;

  constructor(private lineService: LineService,
              private route: ActivatedRoute) {
              this.activatedRoute = route;
  }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe(params => {
      const id = params.id;
      this.name = this.lineService.getLineById(+id).refCharge;
      this.status = this.lineService.getLineById(+id).date;
      this.date_jour = this.lineService.getLineById(+id).date;
      this.heure_act = this.lineService.getLineById(+id).utcTime;
      this.reference_charge = this.lineService.getLineById(+id).refCharge;
      this.reference_decharge = this.lineService.getLineById(+id).refDecharge;
      this.quantite_produite = this.lineService.getLineById(+id).quantiteEnCours;
      this.quantite_h_reel = this.lineService.getLineById(+id).quantiteHoraireReel;
      this.quantite_h_th = this.lineService.getLineById(+id).quantiteHoraireTheorique;
      this.quantite_p_reel = this.lineService.getLineById(+id).quantitePosteReel;
      this.quantite_p_th = this.lineService.getLineById(+id).quantitePosteTheorique;
      this.trp_h_reel = this.lineService.getLineById(+id).trpHeureReel;
      this.trp_p_reel = this.lineService.getLineById(+id).trpPosteReel;
      this.trp_objectif = this.lineService.getLineById(+id).trpObjectif;
      this.conso_air = this.lineService.getLineById(+id).consoAir;
      this.conso_elec= this.lineService.getLineById(+id).consoElec;
    });
  }
}

最后，我的 HTML 页面：

<div class="container-fluid">
  <div [ngClass]="{'list-group-item': true,
                'list-group-item-success': status === 'allumé',
                'list-group-item-danger' : status === 'éteint',
                'list-group-item-warning' : status === 'changement'
                }">
    <h1>
      <p *ngIf="status === 'allumé'"> {{ name }} | en production
        <span class="glyphicon glyphicon-ok"></span>
      </p>
      <p *ngIf="status === 'éteint'">{{ name }} |  à l'arrêt
        <span class="glyphicon glyphicon-remove"></span>
      </p>
      <p *ngIf="status === 'changement'">{{ name }} | changement en cours
        <span class="glyphicon glyphicon-refresh"></span>
      </p>
    </h1>
  <div class="row h3">

    <div class="col-sm-6 list-group-item-text text-center">
      <p> Référence en cours de chargement : {{ reference_charge }}</p>
      <p> Référence en cours de déchargement : {{ reference_decharge }}</p>
    </div>
  </div>

    <div class="row list-group-item-text text-center h4">
      <div class="col-sm-3 text-center">
        <p>Quantité de pièces totale : {{ quantite_produite }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>Pièces produites dans l'heure : {{ quantite_h_reel }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>Pièces à produire par heure : {{ quantite_h_th }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>Pièces produites sur le poste : {{ quantite_p_reel }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>Pièces à produire sur un poste : {{ quantite_p_th }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>TRP de l'heure: {{ trp_h_reel }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>TRP du poste: {{ trp_p_reel }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>TRP Objectif: {{ trp_objectif }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>Consommation d'air: {{ conso_air }}</p>
      </div>
      <div class="col-sm-3 text-center">
        <p>Consommation électrique : {{ conso_elec }}</p>
      </div>
        </div>
    <button class="btn btn-primary" routerLink="/lines">Retour</button>
  </div>
  <app-view-graph></app-view-graph>

</div>

但问题是，当我重新加载页面时，出现错误：TypeError: Cannot read property '...' of undefined。这是因为页面正在加载，然后读取数据运行。如果我通过导航栏更改页面并返回正确的页面，则数据就在这里。我只想在数据存在时显示页面。

我尝试了 Promise、Async、Await、SpinnerLoad，但它不起作用。

欢迎任何帮助。谢谢

标签： javascripthtmlangulartypescriptcsv

解决方案

谢谢，谢谢，谢谢！它有效，非常感谢。

那不是“伪”代码^^，我只更改了一件事。

this.route.params.pipe(filter(x=> !!x.id), map(x => x.id))

经过

this.route.params.pipe(filter(x=> !!x.id), map(x => x.id -1))

在正确的页面中有正确的数据。就这样。

感谢您的回答，祝您有美好的一天

推荐阅读