IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Faire marcher un asynchrone pipe en angular


Sujet :

Angular

  1. #1
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut Faire marcher un asynchrone pipe en angular
    Bonjour, je développe une application angular. Le problème est que mon template s'affiche avant que une variable (annonces) renvoyée par une requête du component correspondant ne soit retournée. Je dois donc utiliser un async pipe, ce que j'essaye de faire, mais ça ne marche pas.

    Voici le component

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    export class AppListProduitImmobilierComponent implements OnInit {
     
      public annonces: Observable<ProduitImmobilierDTO[]>
    .................
    .................
      ngOnInit() {
        this.preloadData();  // this function does a pre-request and afterwards call loadData(search)
    ................
    ...............
        loadData(search: Search) {
          this.annonces = this.service.getListProduitImmobilierDTO(this.pagesize, this.page, search);
    La partie du template concernée est

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <mat-card *ngFor="let annonce of annonces | async; let i = index" class="pointer">

    Et le service est le suivant:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
      getListProduitImmobilierDTO(pagesize: number, page: number, search: Search): Observable<ProduitImmobilierDTO[]> {
        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
        const options = { headers: headers };
        search.page = page;
        search.pageSize = pagesize;
        return this.http.post<Search>('/api/produitimmobilier/all', JSON.stringify(search), options).pipe(map((search: Search) => search.result as ProduitImmobilierDTO[]));
      }
    Pouvez vous m'aider ?

  2. #2
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut
    Après la fermeture de firefox et la réouverture, cela a fonctionné. La requête POST a atteint le serveur en un temps aléatoire, et le temps est assez long entre chaque réponse. Après quelques réponses du POST et un certain temps, cela n’a pas fonctionné à nouveau. Donc, le code fonctionne, mais il doit y avoir un certain réglage à faire ou quelque chose à changer pour avoir une réponse rapide du serveur. Le problème est que la demande ne se déclenche pas immédiatement, mais il y a un retard qui peut être très, très long.
    Est-ce que vous voyez quoi faire ?

  3. #3
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    c'est le serveur le problème....

    le front n'a rien a voir avec cette lenteur

  4. #4
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut
    Ce matin, j'ai allumé mon ordinateur et modifié le code pour faire une requête normale (qui n'utilise pas de pipe asynchrone).


    La fonction loadData () est devenue la suivante
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
        public annonces: ProduitImmobilierDTO[];
        loadData(search: Search) {
          console.log('LOADDATA is called');
          this.service.getListProduitImmobilierDTO(this.pageSize, this.page, search).subscribe(
            articles => {this.annonces = articles; this.collectionSize = articles[0].collectionSize; console.log('this.annonces'); console.log(this.annonces)},
            (err: HttpErrorResponse) => {
              console.log(err);
            }
          );
    le template approprié utilisant * ngFor est devenu le suivant

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
        <mat-card *ngFor="let annonce of annonces; let i = index"  class="pointer">

    Et je peux voir que la demande POST est faite presque immédiatement, mais le template ne s’actualise pas (c’est pourquoi j’ai essayé le pipe asynchrone) immédiatement, mais après un certain temps. Ainsi, la différence entre utiliser la requête sans pipe asynchrone et un utiliser un pipe asynchrone réside dans le fait que, lorsque vous n'utilisez pas de pipe asynchrone, la requête POST est effectuée immédiatement, mais il y a un délai de latence avant la mise à jour du template. Je pensais qu'en utilisant un pipe asynchrone, le template était mis à jour immédiatement lorsque la demande POST était déclenchée, mais le problème avec ce choix est que la demande POST a atteint le serveur après un très très long délai. Je suis donc toujours bloqué: mon objectif est d'interagir immédiatement entre le client et le serveur

  5. #5
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut
    Bonjour krakatoa, il y a une chose qui m’échappe quand tu dis que le problème, c’est le serveur. Quand j’utilise un Observable et un async pipe dans mon template, les logs du serveur m’indique que le controlleur qui reçoit la requête est déclenchée parfois jamais, parfois après un temps très long, voir très très long.

    Et que veux dire le fait que quand j’utilise une simple requête à laquelle je m’abonne (subscribe) dans mon composant, les logs du serveur me montre que la requête est immédiatement traitée et renvoyé au client ? et dans ce cas le tempalte est mis à jour

  6. #6
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut
    Ce que je peux vous dire, c'est quand je ferme mon browser et le réouvre, tout marche, et ceci, même quand je n'utilise pas async pipe

  7. #7
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut
    Comme j'ai ma requête POST qui marche, j'essaye de construire un Observable à partir du résultat de ma requête et l'utiliser dans le template

    Dans mon component
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        public annonces$: Observable<ProduitImmobilierDTO[]> = new Observable<ProduitImmobilierDTO[]>();
     
            loadData(search: Search) {
              this.service.getListProduitImmobilierDTO(this.pageSize, this.page, search).subscribe(
                articles => {this.annonces = articles; 
                  this.annonces$ = of(articles);
                  this.collectionSize = articles[0].collectionSize; console.log('this.annonces'); console.log(this.annonces)},
                (err: HttpErrorResponse) => {
                  console.log(err);
                }
              );
            }
    Dans mon template template
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
        <mat-card *ngFor="let annonce of annonces$ | async; let i = index" class="pointer">

    Mais ça ne marche pas

  8. #8
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    https://blog.thoughtram.io/angular/2...explained.html


    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
    19
    20
    21
    22
    23
    24
    25
     
    @Component({
      selector: 'ns-clock',
      template: `
        <h2>Clock</h2>
        <p>{{ getTime() }}</p>
        <button (click)="start()">Start</button>
      `
    })
    export class ClockComponent implements OnDestroy {
      time: number;
      timeSubscription: Subscription;
     
      constructor(private ref: ChangeDetectorRef) {
     
      }
     
      start() {
     
     
    dans observer() ....
     
            this.ref.detectChanges();   // lance la detection de changement
     
    }

  9. #9
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut
    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Faire marcher mon flash disque sous linux
    Par sabrinaaa dans le forum Matériel
    Réponses: 2
    Dernier message: 02/03/2006, 09h22
  2. [ant] comment le faire marcher?
    Par afrikha dans le forum ANT
    Réponses: 11
    Dernier message: 23/12/2005, 17h18
  3. Faire du code asynchrone
    Par cedricgirard dans le forum Langage
    Réponses: 8
    Dernier message: 30/11/2005, 17h39
  4. Impossible de faire marcher SESSIONS_PER_USER
    Par jack554 dans le forum Oracle
    Réponses: 7
    Dernier message: 05/01/2005, 12h50
  5. [Debutant(e)][Tomcat]Comment faire marcher Tomcat?
    Par chuck norris dans le forum Tomcat et TomEE
    Réponses: 11
    Dernier message: 24/11/2004, 17h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo