Tengo un <ng-container *ngFor='let column of columns'></ng-container> que se muestra varias veces en la página debido a *ngFor . Quiero aplicar el atributo "adhesivo" (directiva) solo al primero de estos elementos de contenedor ng. No a los demás. ¿Cómo puedo hacer eso? La salida entonces debería verse así:
<ng-container sticky></ng-container> <ng-container></ng-container> <ng-container></ng-container> <ng-container></ng-container> ...La directiva ngFor tiene una first variable que es verdadera solo para la primera iteración.
ngIf tiene una palabra clave else que, junto con una variable de plantilla, puede representar de forma condicional una de dos plantillas.
<ng-container *ngFor="let column of columns; first as isFirst"> <ng-container *ngIf="isFirst; else notFirst" sticky></ng-container> <ng-template #notFirst></ng-template> </ng-container><ng-container> no existirá en el DOM. Se usa solo para recorrer los elementos y generar algo de contenido dinámicamente. Entonces, si le aplica directamente una directiva sticky , no tendrá ningún efecto. Pero puede aplicar una directiva sticky a los elementos generados por <ng-container> . Le sugiero que agregue un <div> dentro <ng-container> como un envoltorio para el contenido y le aplique una directiva sticky . Además, puede usar la first variable de *ngFor para aplicar la directiva sticky solo al primer elemento.
<ng-container *ngFor='let column of columns; let first as first'> <div *ngIf="first" sticky> <!--Your actual content--> <div> <div *ngIf="!first"> <!--Your actual content--> <div> </ng-container>Puedes usar el índice para esto:
<ng-container *ngFor="let column of columns; let i = index"> <div *ngIf="i=0" sticky></div> <div *ngIf="i!=0"></div> </ng-container>