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 !
3 réponses
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>
*** 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 :)
Il suffit d'ajouter un point-virgule (opérateur sûr) avant .length Comme ça
<ng-container *ngIf="childDetailComp?.length > 0; else emptyMessage">
Questions connexes
De nouvelles questions
angular
Questions sur Angular (à ne pas confondre avec AngularJS), le framework web de Google. Utilisez cette balise pour les questions angulaires qui ne sont pas spécifiques à une version individuelle. Pour l'ancienne infrastructure Web AngularJS (1.x), utilisez la balise angularjs.