Discussion :

[cdevl37]

bonjour,

J'ai deux questions :

1) comment faire pour mettre à jour automatiquement ma page qui affiche c'est données ?

2) Je voudrais que sur ma page il affiche pour chaque monnaie le symbole qui correspond, ici dans mon cas il affiche toute mes monnaie en avec le symbole $

j'ai ceci comme affichage :

BTC $7,050.01

ETH $170.05

EUR $1.09 ici je voudrais le symbole euro

mon code source : data.service.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
import { map } from 'rxjs/operators';
 
@Injectable()
export class DataService {
 
  result:any;
 
  constructor(private _http: HttpClient) {}
 
  getPrices() {
    return this._http.get("https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,EUR&tsyms=USD")
      map(result => this.result = result);
  }
 
}

app.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  ngOnInit() {
    this._data.getPrices()
      .subscribe(res => {
        this.cryptos = res;
        console.log(res);
      });
  }
}

app.component.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div *ngIf="cryptos">
  <div id="crypto-container" *ngFor="let crypto of objectKeys(cryptos)">
    <span class="left">{{ crypto }}</span>
    <span class="right">{{ cryptos[crypto].USD | currency:'USD':true}}</span>
  </div>
</div>

[pfuek]

en voyant USD, tu peux te douter que c'est les dollars :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<span class="right">{{ cryptos[crypto].USD | currency:'USD':true}}</span>

faut se dire peut etre en mettant EUR

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span class="right">{{ cryptos[crypto].EUR| currency:'EUR':true}}</span>

puis, si ça ne fonctionne pas
alors suffit de chercher sur internet avec les mots clés: angular currency euro


** autre point:
pour les dates, surement mettre le local_id sur 'fr-FR'

une recherche sur google: angular local_id français

[cdevl37]

oui en effet sa c'est ok pour changer en EUR sa fonctionne.

En ce qui concerne la mise à jour des données sur ma page avez vous une idée ?

merci à vous pour votre aide

[krakatoa]

https://alligator.io/angular/change-detection-strategy/


this.cd.detectChanges();

[cdevl37]

Merci à vous.

au niveau de mon code je dois indiquer ou exactement ? je n'ai encore jamais utiliser je suis un petit peux perdu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
import { map } from 'rxjs/operators';
 
@Injectable()
export class DataService {
 
  result:any;
 
  constructor(private _http: HttpClient) {}
 
  getPrices() {
    return this._http.get("https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,EUR&tsyms=EUR")
      map(result => this.result = result);
  }
 
}

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
ngOnInit() {
    this._data.getPrices()
      .subscribe(res => {
        this.cryptos = res;
        console.log(res);
this.cd.detectChanges();
      });
  }
}

[cdevl37]

merci à vous

ceci est correct ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 this.cryptos.detectChanges();

[pfuek]

tu dis qu'avec EUR ça fonctionne donc ça se met à jour alors !

[cdevl37]

bonsoir,

oui je voulais dire que USD a bien été changer avec EUR, mes se que je voudrais c'est qu'il fasse un genre de refresh sur mes données automatiquement sa devoir réactualiser ma page web.

[krakatoa]

tu veux dire que ça fonctionne une fois. ce qui est normal avec une requête http.
tu lance 1 fois la requête et donc tu vas recevoir QU'UNE SEULE RÉPONSE.
si par la suite la donnée change sur le serveur tu n'en saura rien... c'est du HTTP... sauf si tu relance la requête une 2eme fois

[cdevl37]

ok et comment faire pour mettre à jour automatiquement les données ?

[krakatoa]

soit plus précis dans tes questions qu'on est pas a deviner tes besoins...

la solution la plus simple et la plus crade et à éviter c'est de faire une tempo pour que toute les 60secondes par ex il lance la requête.

avec des délais plus court genre toutes les secondes ou moins c'est pourri car ca va ralentir le navigateur à faire 60 requêtes par minutes

[cdevl37]

sorry pour mes questions qui sont pas très précise en effet j'ai déjà tester cette solution mes c'st moyen je trouve.

Il est pas possible de mettre à jours automatiquement le montant ? des que cette donnée change sur le lien ou j'ai été la chercher ?

[krakatoa]

aucun.

sauf si tu utilises les websocket
il faut donc tout changer la technique sur le serveur et bien sur l'adapter sur le client (plus de htpp classique mais du web socket donc)

[cdevl37]

bonjour,

En pratique sa donne quoi ?

et avec SetInterval c'est possible ?

[pfuek]

on t'a dis tout ce qu'il fallait savoir...
on ne peut pas faire le code à ta place, la moindre des choses c'est de prendre la peine de chercher sur internet

[cdevl37]

merci quand même

[krakatoa]

google -> javascript setinterval
google -> angular ngOnDestroy

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
myTimer,
 
ngOnInit() {
  this.myTimer = setInterval(this.dataRefresh(), 1000);     // toutes les secondes 
}
 
 
dataRefresh() {
    this._data.getPrices()
      .subscribe(res => {
        this.cryptos = res;
      });
  }
 
ngOnDestroy() {
  clearInterval(this.myTimer);
}

[cdevl37]

Merci encore pour votre aide

bon weekend

encore un petit soucis

j'ai tester mes sa ne fonctionne pas voici mon code source :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
myTimer;
  ngOnInit() {
    this.myTimer = setInterval(this.dataRefresh(), 1000);     // toutes les secondes
  }
 
    dataRefresh() {
    this._data.getPrices()
      .subscribe(res => {
        this.cryptos = res;
        console.log(res);
      });
    } 
      ngOnDestroy() {
        clearInterval(this.myTimer);
  }
 
}