Je veux afficher les 5 premières données dans une donnée json dans un div, qui est situé à gauche et les autres données dans l'autre div, qui est situé à droite.
mais cela ne fonctionnait pas.
le code comme ceci:
[
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
},
{
"state": "Success",
"label": "hello",
"message": "message"
}
]
et cette structure jsonData est comme ceci:
<div *ngFor="let data of jsonData; let i = index">
<div
class="content"
[ngClass]="{ 'content-left': i < 5, 'content-right': i >= 5 }"
>
<ng-container *ngIf="data.state === 'Success'">
<div class="state-success">
<mat-icon>done</mat-icon>
</div>
</ng-container>
<ng-container *ngIf="data.state === 'Failure'">
<div class="state-failure">
<mat-icon matTooltip="{{ data.message | translate }}">clear</mat-icon>
</div>
</ng-container>
<ng-container *ngIf="data.state === 'Undefined'">
<div class="state-undefined">
<mat-icon matTooltip="{{ data.message | translate }}">clear</mat-icon>
</div>
</ng-container>
<div class="message">{{ data.label | translate }}</div>
</div>
</div>
Je ne sais pas comment écrire ce code ngFor.
Quelqu'un une suggestion?
Meilleures salutations,
Leo
3 Réponses :
Votre expression ngClass peut ressembler à ceci:
<div *ngFor="let data of jsonData; let i = index">
<ng-container *ngIf="i < 5; else list">
<!-- First five items -->
...
</ng-container>
<ng-template #list>
<!-- All other items -->
...
</ng-template>
</div>
Vous pouvez utiliser ngIf :
<div *ngFor="let data of jsonData; let i = index">
<ng-container *ngIf="i < 5">
<!-- First five items -->
...
</ng-container>
<ng-container *ngIf="i >= 5">
<!-- All other items -->
...
</ng-container>
</div>
Ou en utilisant else :
<div class="content"
[ngClass]="i < 5 ? 'content-left' : 'content-right'">
Créez la méthode dans le composant et utilisez
firstfive = data.splice(5, data.length); allBesideFirstFive = data.splice(0, 4);
Que dans create ngFor pour firstfive et allBesideFirstFive
Voici un exemple de stackblitz fonctionnel: https://stackblitz.com/edit/angular -7-master-ufayvp
<div *ngFor="let number of numbers; let i=index;">
<div *ngIf="i<5">{{number}}</div>
<div *ngIf="i>=5">{{number}}</div>
</div>
C'est tellement basique, j'espère que cela aide.
Comme @pzaenger l'a mentionné dans d'autres réponses, vous pouvez également utiliser else condition également.
J'ai mis à jour la structure de mes données json ... pouvez-vous mettre à jour votre exemple?
jsonData est un tableau? pouvez-vous nous montrer votre fichier ts?
JsonData est un format Json {{key: value}, {key: value}}
Si les classes content-left et content-right sont ajoutées correctement, il peut s'agir d'un problème css. Classe utilisateur pull-left && pull-right qui sont les valeurs par défaut de bootstrap.
de ma solution, j'ai obtenu tous les 5 premiers éléments avec la classe de contenu à gauche, ce n'est pas ce que je veux.