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:

---

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:

---

<mat-card *ngFor="let annonce of annonces | async; let i = index" class="pointer">

---

Et le service est le suivant:

Code:

---

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 ?

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 ?

c'est le serveur le problème....

le front n'a rien a voir avec cette lenteur

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:

---

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:

---

<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

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

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

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:

---

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:

---

<mat-card *ngFor="let annonce of annonces$ | async; let i = index" class="pointer">

---

Mais ça ne marche pas

https://blog.thoughtram.io/angular/2...explained.html

Code:

---

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   }

---

Merci