J'ai ceci dans un composant.html de mon projet angulaire
<li *ngFor="let activity of dto.activities | sortHistoryActivity; trackBy: trackByFn">
<span>
<a (click)="scrollToHistoryActivity(activity.firstTaskId, activity.firstActivityId)">{{activity.title}}</a>
</span>
<p class="timestamp">{{activity.startTime | date:"dd.MM.yyyy, HH:mm:ss"}}</p>
</li>
</ol>
3 Réponses :
Je pense que ce dont vous avez besoin est d'ajouter de manière conditionnelle des éléments, vous pouvez y parvenir en utilisant le composant NG-Conteneur fourni par l'angulaire comme suit:
<ol>
<ng-container *ngFor="let activity of dto.activities | sortHistoryActivity; trackBy: trackByFn">
<!-- if activity doesn't contain number -->
<p *ngIf="!activity.number">Insert of html</p>
<!-- if activity contains number -->
<li *ngIf="activity.number">
<span>
<a (click)="scrollToHistoryActivity(activity.firstTaskId, activity.firstActivityId)">{{activity.title}}</a>
</span>
<p class="timestamp">{{activity.startTime | date:"dd.MM.yyyy, HH:mm:ss"}}</p>
</li>
</ng-container>
</ol>
Cela aide, mais n'est pas exactement ce que je cherche. Ce que je veux, c'est après les 3 premières activités, à ajouter du code HTML qui n'est pas à l'intérieur de
Si le nombre est important, je vous recommanderais de stocker cela dans le modèle et de prendre le contrôle sur ce qui est affiché.
Pour répondre directement à votre question, vous pouvez indiquer le numéro de départ d'un p> ol code> Utilisation de l'attribut Démarrer code>. p>
<ul>
<li *ngFor="let activity of dto.activities">
{{activity.order}}. {{activity.name}}
</li>
</ul>
Compte tenu de la page HTML suivante:
<ol #orderedListRef> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> <h1>example text</h1> <----- <li>fifth</li> <li>sixth</li> </ol>
J'ai du mal à comprendre votre question. Pourriez-vous essayer de le reformuler? Peut-être donner un exemple?
@sLoth J'ai mis à jour la question, espérons-le que vous pouvez le comprendre mieux maintenant :)
@ Cryptorian420 Je pense que vous feriez mieux de créer une démonstration en direct à Stackblitz. Un peu de HTML et une image pourraient être interprétées de 100 manières différentes.
@ Cryptorian420 Donc, l'objet aura le numéro? activité??