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 ?