0
votes

Comment attendre le chargement des données dans Angular

Avant d'ouvrir la fenêtre de dialogue, je souhaite charger des données:

    export class DocumentService {
        private documents: any[] = [];
    
        constructor(private http: HttpClient) {}
    
        loadDocuments(reglamentId: number): Observable<any[]> {
            return this.http.get<Department[]>(`${environment.apiUrlDocuments}/Generation/documents?reglamentId=${reglamentId}`);
        }
    
        getDocuments() {
            return this.documents;
        }
    
        setDocuments(documents): void {
            this.documents = documents;
        }
    }

Le service est:

const documents = await this.documentService.loadDocuments(this.application.reglamentid);
     this.documentService.setDocuments(documents);
     dialog.open();

I voulez attendre une réponse seulement pour ouvrir une fenêtre de dialogue.

angular rxjs

2 commentaires

Veuillez essayer le canal asynchrone < angular.io/api/common/AsyncPipe >?

Non je ne peux pas l'utiliser, j'essaye d'attendre observable en composant

4 Réponses :

1
votes

async / await nécessite que la méthode appelée renvoie une promesse, pas une observable.

Vous devrez changer votre méthode loadDocuments (...) en:

async loadDocuments(reglamentId: number): Promise<any[]> {
  return this.http.get<Department[]>(`${environment.apiUrlDocuments}/Generation/documents?reglamentId=${reglamentId}`).toPromise();
}

5 commentaires

Merci, donc j'ai besoin de le convertir en promesse, non?

Oui. async / await est basé sur Promise.

Pourquoi utilisez-vous async avant loadDocument si j'utilise async à l'extérieur?

Pour être en attente (capable), la méthode doit être marquée comme asynchrone.

Je le dis seulement parce que je n'ai aucun autre code à référencer. Si votre méthode externe, comme une méthode de cycle de vie, est marquée comme asynchrone, vous pouvez supprimer l'async depuis loadDocuments ()

0
votes

Vous avez deux options pour réaliser cette fonctionnalité.

Utiliser l'attente avec la requête http. Je pense que c'est ce que vous avez essayé de faire. Par défaut, angular httpclient renvoie Observable pour chaque requête http pour cette raison, vous devez ajouter toPromise () à l'appel http similaire à celui-ci

this.documentService.loadDocuments(this.application.reglamentid).then((documents)=>{
   this.documentService.setDocuments(documents);
   dialog.open();
});

Cela renverra une promesse attendue et alors vous pouvez utiliser le code que vous avez fourni le code. De couse, la méthode de l'appelant doit être asynchrone pour pouvoir utiliser await.

Si vous ne souhaitez pas utiliser les fonctions asynchrones, utilisez le même code dans le service que j'ai fourni puis utilisez la méthode .then p >

async loadDocuments(reglamentId: number): Observable<any[]> {
        return this.http.get<Department[]>(`${environment.apiUrlDocuments}/Generation/documents?reglamentId=${reglamentId}`).toPromise();
    }

0 commentaires

1
votes

Vous pouvez utiliser la méthode d'abonnement:

this.documentService.loadDocuments(this.application.reglamentid)
   .subscribe(documents => {
      this.documentService.setDocuments(documents);
      dialog.open();
   }

https://angular.io/guide/observables-in-angular#observables-in-angular

0 commentaires

0
votes

Concernant le fait que vous soyez dans un environnement Angular, il est recommandé d'utiliser Observables. Vous pouvez appeler la méthode subscribe sur un Observable pour gérer cela.

Pour donner plus d'explications sur Observable et Promise, la principale différence est qu'un Observable peut être représenté comme un "stream" et non comme la Promise, et vous pouvez ajouter différentes opérations pour gérer le stream (cf.https: // rxjs .dev / guide / overview).

Comprendre le concept Observable est indispensable dans l'application Angular.

0 commentaires