J'essaie de créer une condition lors de l'affichage de mes données qui sont affichées par statut.

Pour le moment j'en ai 3 dans lesquels je charge mon composant et qui affiche ce composant si l'état correspond, mais j'aimerais pouvoir afficher un message s'il n'y a pas de composants affichés.

J'ai essayé de faire un ngIf mais ça ne marche pas. Je ne sais pas si je fais ma condition au bon endroit.

Index.component.html:

<div class="container-fluid project-dashboard">
                <h2><span >En cours </span><i class="fa fa-info-circle" placement="right" ngbTooltip="Projets en cours de traitements par l'équipe"></i></h2>
                <app-detail-tiles [childDetailComp]="House | filter:'En cours'"></app-detail-tiles>
                <li class="linkProjectListDashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a
                    [routerLink]="['/pages/page-projects-list']">Voir tous les projets</a></li>
            </div>
            <div class="container-fluid project-dashboard">
                <h2><span>Informations manquantes </span><i class="fa fa-info-circle" placement="right" ngbTooltip="Informations manquantes pour continuer le projet"></i></h2>
                <app-detail-tiles [childDetailComp]="House | filter:'Informations manquantes'"></app-detail-tiles>
                <li class="linkProjectListDashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a
                    [routerLink]="['/pages/page-projects-list']">Voir tous les projets</a></li>
            </div>
            <div class="container-fluid project-dashboard">
                <h2><span>Déjà publié </span><i class="fa fa-info-circle" placement="right" ngbTooltip="Projets terminés et publiés"></i></h2>
                <app-detail-tiles [childDetailComp]="House | filter:'Déjà publié'"></app-detail-tiles>
                <li class="linkProjectListDashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a
                    [routerLink]="['/pages/page-projects-list']">Voir tous les projets</a></li>
            </div>

J'ai 3 div dans lesquels j'appelle le composant "app-detail-tiles" et qui filtre par statut.

Detail-tiles.component.html:

  <div class="row clearfix">
    <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">
      <div class="card overflowhidden  border">
        <div class="body">
          <div class="number">
            <h6>{{ projet.title | uppercase }}</h6>
            <img class="img-fluid" src="{{ projet.img }}" />
            <div class="container-overlay">
              <div class="overlay img-fluid">
                <div class="items"></div>
                <div class="items head">
                  <p><span>Type</span>: {{ projet.type }}</p>
                  <p><span>Ville</span>:  {{ projet.city }}</p>
                  <p><span>Agence</span>: {{ projet.owner }}</p>
                  <p><span>Adresse</span>: {{ projet.street }}</p>
                  <p><span>Status</span>: {{ projet.projectStatus }}</p>
                </div>
                <div class="items price">
                  <p><span>Surface</span>: {{ projet.surface }} m²</p>
                </div>
              </div>
            </div>
          </div>
          <small class="text-muted badge">{{ details }}</small>
        </div>
      </div>
    </div>
  </div>

Dans ce composant, je boucle sur mon tableau d'objets pour afficher les différents détails.


Je voudrais que le composant affiche les bonnes informations si l'état correspond, sinon j'afficherais un message.

Exemple: si status == 'x-status' charge les informations, sinon affiche le message

Merci de votre aide !

0
SteveP 20 juin 2019 à 13:55

3 réponses

Meilleure réponse

Vous pouvez utiliser ng-container et ng-template pour y parvenir.

<div class="row clearfix">
<ng-container *ngIf="childDetailComp && childDetailComp.length > 0; else emptyMessage">
<div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">
  <div class="card overflowhidden  border">
    <div class="body">
      <div class="number">
        <h6>{{ projet.title | uppercase }}</h6>
        <img class="img-fluid" src="{{ projet.img }}" />
        <div class="container-overlay">
          <div class="overlay img-fluid">
            <div class="items"></div>
            <div class="items head">
              <p><span>Type</span>: {{ projet.type }}</p>
              <p><span>Ville</span>:  {{ projet.city }}</p>
              <p><span>Agence</span>: {{ projet.owner }}</p>
              <p><span>Adresse</span>: {{ projet.street }}</p>
              <p><span>Status</span>: {{ projet.projectStatus }}</p>
            </div>
            <div class="items price">
              <p><span>Surface</span>: {{ projet.surface }} m²</p>
            </div>
          </div>
        </div>
      </div>
      <small class="text-muted badge">{{ details }}</small>
    </div>
  </div>
</div>
</ng-container>
<ng-template #emptyMessage>
    <div> Project List is empty </div>
</ng-template>
1
schoolcoder 20 juin 2019 à 11:36
    *** Can be achieved in many ways***


        //option 1      
              <div class="row clearfix">
                          <div *ngIf="childDetailComp.length>0"> // type 1
                           <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                            </div>
                            <div *ngIf="childDetailComp.length === 0">
                               // error message
                            <div>
                          </div>
            //option 2
                <div class="row clearfix">
                             <ng-container *ngIf="childDetailComp.length > 0; else message">
                               <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                                </div>
                                <div *ngIf="childDetailComp.length === 0">
                                   // error message
                                <div>
                        </ng-container>
                        <ng-template #message>
                            // error message
                        </ng-template>
                        </div>
              //option 3  
assign a boolean value in .ts file
                let showTable = childDetailComp !== undefined?childDetailComp.length >0 ? true : false:false;

                    <div class="row clearfix">
                            <div *ngIf="showTable; else message">
                           <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                                </div>
                        <ng-template #message>
                            // error message
                        </ng-template>
                        </div>

             //option 4   
assign a boolean value in .ts file
                let showTable = childDetailComp !== undefined?childDetailComp.length >0 ? true : false:false;

                    <div class="row clearfix">
                    <ng-template
                      *ngIf="showTable; else message">
                    </ng-template>

                <ng-template #showTable>
                           <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                                </div>
                    </ng-template>
                        <ng-template #message>
                            // error message
                        </ng-template>
                        </div>

Hope it helps :)
1
gcodess 20 juin 2019 à 12:15

Il suffit d'ajouter un point-virgule (opérateur sûr) avant .length Comme ça

<ng-container *ngIf="childDetailComp?.length > 0; else emptyMessage">

0
Seydina Alioune THIEMA 20 juin 2019 à 11:29