J'ai les données suivantes: J'essaie d'afficher sur le Web comme mais le résultat de sortie est chevauché. Comment puis-je atteindre mon résultat attendu? édité
Après avoir vérifié le CSS, il s'agissait d'un problème de CSS: J'ai essayé d'utiliser Toute suggestion sur la façon de modifier le CSS? AAA, BBB, ... avec le code suivant: texte-align: gauche (qui ne fonctionne pas dans Grille de matériau angulaire) ou largeur: 100% (qui entraîne un large espace entre les éléments).
3 Réponses :
enveloppe mat-grille-liste code> autour de mat-grid-tuile vous devez utiliser code> au lieu de code> comme div est élément bloqué. Voir ci-dessous <mat-grid-list cols="1">
<mat-grid-tile>
<div class="text-grid" *ngFor="let value of data; let f = first">
<span *ngIf="f">
{{value.name}}
</span>
<span *ngIf="!f">
, {{value.name}}
</span>
</div>
</mat-grid-tile>
</mat-grid-list>
Même après avoir utilisé , la valeur de valeur est toujours superposée.
Pouvez-vous reproduire cela sur Stackblitz, il ressemble à un problème de CSS et non à un code
Vous avez raison! Je supprimai la classe text-grille de et ils ne se chevauchent plus. Je vais regarder à mon CSS.
Vous devez probablement envelopper votre contenu dans Supprod Tip : Pas besoin d'ajouter deux mat-grid-list , comme ci-dessous - * ngif , vous pouvez rechercher Dernier index dans le * ngfor comme ci-dessus. < / p>
Essayez peut-être de formater vos données avant de la mettre dans le modèle
composant.ts
Pour quel but vous utilisez
ngif ?ngif est destiné à ajouter la virgule avant le nom s'il n'est pas le premier élémentJe suppose que vous n'avez pas besoin de vérifier cela puisqu'il sera exécuté à partir du premier objet lui-même, vous devez ajouter
, après{{valeur.name}},