[英]Wait before display data with {HttpClient} - typescript - Angular
For 4 days I'm trying somethings to display data but nothing is running. 4 天以来,我正在尝试显示数据,但没有任何运行。 My goal is to receive data from an internal server in the factory.
我的目标是从工厂的内部服务器接收数据。 So, some Siemens CPU sends data in CSV file, et I read that in
所以,一些西门子 CPU 在 CSV 文件中发送数据,我在
line.service.ts
线路服务.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;
}
}
Now, in this.ts, I split CSV data to have an object of my 6 productions lines.现在,在 this.ts 中,我将CSV 数据拆分为我的 6 条生产线的 object。 And I send data for my html page, to display that.
我为我的 html 页面发送数据,以显示它。 I read data with this components:
我用这个组件读取数据:
single.line.components.ts
单行组件.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;
});
}
}
And to finish, my HTML page:最后,我的 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>
But the problem is, when i reload my page, there is an error: TypeError: Cannot read property '...' of undefined.但问题是,当我重新加载页面时,出现错误:TypeError: Cannot read property '...' of undefined。 It's because the page is loading and after, the read data runs.
这是因为页面正在加载,然后读取数据运行。 If I change the page by my navbar and I return to the correct page, the data are here.
如果我通过导航栏更改页面并返回正确的页面,则数据就在这里。 I want to display the page only when the data are present.
我只想在数据存在时显示页面。
I tried with Promise, Async, Await, SpinnerLoad but it does not work.我尝试使用 Promise、Async、Await、SpinnerLoad,但它不起作用。
Any help is welcome.欢迎任何帮助。 Thanks
谢谢
I would suggest making your solution a bit more reactive.我建议让您的解决方案更具反应性。
First instead of using a for loop to iterate over all links and then push them in the lines[]
i would suggest the following approach首先,不要使用 for 循环遍历所有链接,然后将它们推送到
lines[]
中,我建议采用以下方法
import {BehaviourSubject} from 'rxjs'; import {HttpClient} from '@angular/common/http'; import {Injectable} from '@angular/core'; @Injectable() export class LineService{ constructor(private http: HttpClient) { this.getData(); } lineSubject = new BehaviourSubject<RcvData[]>([]); 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' ]; combineLatest(lists.map(list => this.http.get(list, {responseType: 'text'}))).subscribe(listResults => { const parsedListResults = listResults.map(data => { const csvToRowArray = data.split('\n'); const lastRow = csvToRowArray[csvToRowArray.length - 2]; const row = lastRow.split(','); return 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])) }) this.lineSubject.next(parsedListResults) }) } } 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; } }
The main change here is that now instead of having a static lines
ref we have a "live" ref in the form of BehaviourSubject
, for which we can subscribe, and be notified whenever there are any changes.这里的主要变化是,现在我们不再拥有 static
lines
ref,而是有一个BehaviourSubject
形式的“实时” ref,我们可以订阅它,并在有任何更改时收到通知。
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; focusedData$ = combineLatest( this.lineService.lineSubject.pipe(filter(x => x.length > 0)), this.route.params.pipe(filter(x=>.,x.id). map(x => x,id)) ):pipe( map(([csvs, id]) => csvs[id]) ) constructor(private lineService: LineService, private route: ActivatedRoute) { } }
Here the interesting part is the focusData$
we are combing the values stored in the behavior subject that we created in the lineService
and the current id
stored in the URL.这里有趣的部分是我们正在组合存储在 lineService 中创建的行为主题中的值和存储在
lineService
中的当前id
的 focusData focusData$
。 We are filtering all non-valid values and after that, we map the id to the appropriate csv.我们正在过滤所有无效值,然后,我们将 map 的 id 设置为相应的 csv。
From this point on inside your template, you can do something like the following从此时开始在您的模板中,您可以执行以下操作
<div *ngIf="focusedData$ | async"> <div> {{(focusedData$ | async).refCharge }} </div> <div> {{(focusedData$ | async).date }} </div> <div> {{(focusedData$ | async).utcTime }} </div> </div>
This pseudo code will most likely help you in finding the fix for your issue, but anyway, if I was in your shoes I would think about a solution where I call only one csv at a time and when needed, also probably it's not the wisest thing to invoke http calls inside the constructor of your service.此伪代码很可能会帮助您找到解决问题的方法,但无论如何,如果我站在您的立场上,我会考虑一种解决方案,即一次只调用一个 csv 并且在需要时,也可能不是最明智的在服务的构造函数中调用 http 调用的事情。
Thanks, thanks, thanks, It works.谢谢,谢谢,谢谢,它的工作原理。 thanks a lot.
多谢。
That wasn't a "pseudo" code ^^, I change only 1 thing.那不是“伪”代码^^,我只更改了一件事。
this.route.params.pipe(filter(x=> !!x.id), map(x => x.id))
by经过
this.route.params.pipe(filter(x=> !!x.id), map(x => x.id -1))
To have the correct data in the correct page.在正确的页面中有正确的数据。 And, that's all.
就这样。
Thanks for your answer, Have a nice day感谢您的回答,祝您有美好的一天
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.