Angulaire 4 asynchrone avec le chargement et l'affichage lorsqu'il est vide

J'ai Angulaire composant qui reçoit un service CatalogServiceinjecté:

export class CatalogListComponent implements OnInit {
  catalog$: Observable<MovieResponseItem[]>;
  constructor(private catalogService: CatalogService) {}
  ngOnInit() {
    this.catalog$ = this.catalogService.userCatalog;
  }
}

Ce service renvoie un Observable<MovieResponseItem[]> sur la propriété userCatalog:

@Injectable()
export class CatalogService {
  get userCatalog(): Observable<MovieResponseItem[]> {
    return this._userCatalogSubject.asObservable();
  }
}

La MovieResponseItemest juste une interface simple:

export interface MovieResponseItem {
  title: string;
}

Maintenant, je veux parcourir les éléments et d'afficher une animation de chargement pendant que le catalogue des requêtes au service de base de données (ce qui prend un certain temps) - les travaux de cette. C'est le modèle utilisé:

<div *ngIf="(catalog$ | async)?.length > 0; else loading">
   <ng-container *ngFor="let item of catalog$ | async">
     <div>{{item.title}}</div>
   <ng-container>
</div>
<ng-template #loading>loading animation...</ng-template>

De toute évidence, cela affiche le #chargement du modèle, tandis que l'asynchrone est en attente de données. Si l'observable renvoie des données, il effectue une itération sur les valeurs du catalogue.

Mais maintenant, je veux me séparer de cette dans ce comportement:

  • tandis que nous attendons de données, l'affichage de l'animation de chargement
  • si nous avons une réponse du service et de la liste retournée est vide, afficher un texte d'information (comme "votre catalogue est vide") et de ne pas parcourir (comme il n'y a pas de données)
  • si nous avons une réponse du service et de la liste retournée a des valeurs, de parcourir les éléments (comme dans l'état actuel)

Comment puis-je arriver à cela? De ce que j'ai lu sur des postes similaires personne n'a essayé de l'atteindre (ou je n'ai pas trouver).

Merci beaucoup!

Vous pouvez ajouter un autre <ng-container *ngIf="catalogService.userCatalog.length == 0"> <div>your catalogue response is empty</div> <ng-container> juste en dessous de votre ngFor conteneur.

OriginalL'auteur dArignac | 2017-09-26

  1. 35
     <div *ngIf="catalog$ | async as catalog; else loading">
  <ng-container *ngIf="catalog.length; else noItems">
    <div *ngFor="let item of catalog">{{item.title}}</div>
  </ng-container>
  <ng-template #noItems>No Items!</ng-template>
 </div>
 <ng-template #loading>loading animation...</ng-template>

    Cela devrait faire l'affaire. Mieux utiliser quelques async tuyaux que possible et simplement déclarer "comme" une variable de modèle vous pouvez utiliser où jamais. Sinon, le flux sera exécutée une fois par async tuyau qui est une mauvaise pratique et pourrait créer inutiles http appels si c'est http soutenu.

    *modifier l'erreur de syntaxe

    Merci pour votre réponse! Malheureusement, Ce n'affiche jamais le chargement du modèle, mais toujours la noItem en attendant que les Observables de réponse.
    j'aimerais vérifier votre balise de fermeture, ce code fonctionne
    la structure et le champ d'application doit être juste comme je c'est ou il ne fonctionnera pas. le chargement doit être à l'extérieur de la async sur ngIf et la noItems doit être à l'intérieur de la async portée, mais en dehors du catalogue.portée de longueur
    aussi je ne suis pas sûr de ce que la source de l'objet de votre catalogue$ observable est, mais si c'est un comportement sujet, alors ce ne sera jamais "chargement" en tant que la valeur est toujours là immédiatement. si c'est le cas, alors vous avez besoin de l'initialiser à null au lieu de [] [] est "truthy", tandis que la valeur null est falsey
    Compris, probablement mon observable est le problème. J'utilise, comme vous l'avez indiqué, un BehaviorSubject<MovieResponseItem[]> qui est utilisé avec .asObservable(). Je vais essayer de revoir ça.

    OriginalL'auteur bryan60

  2. 1

    hmmm.. https://github.com/angular/angular/issues/14479

    Il suffit de jeter dans un autre ngIf - d'autre condition.

    <div *ngIf="(catalog$ | async);  else loading;">
   <div *ngIf="catalog$.length == 0; else empty;">
      <ng-container *ngFor="let item of catalog$ | async">
         <div>{{item.title}}</div>
      <ng-container>
   </div>
   <ng-template #empty>empty animation...</ng-template>
</div>
<ng-template #loading>loading animation...</ng-template>
    catalogue$ est une observable d'une liste de sorte qu'il n'aura jamais une longueur
    Mes excuses, je vais modifier maintenant.
    Merci, comme on le voit sur les autres répondre à mes catalog$ n'est jamais nulle (actuellement, le régler) ainsi, la laoding animation n'est jamais affiché. Bonne question liée!

    OriginalL'auteur Pezetter