Nos gustaría poner un ng-content dentro de un *ngFor y luego especificar el contenido del contenido ng-content cuando se usa el componente que contiene el ngFor. ¿Es posible?
<li *ngFor="let data of dataSource"> <ng-content></ng-content> </li>Sí, no le dará el resultado adecuado. Pero esto se puede lograr con ng-template y TemplateRef .
He hecho una demostración . Puedes ver la demo que te puede ayudar.
niño.componente.html
<li *ngFor="let rowDetail of dataSource"> <ng-container *ngIf="headerTemplateRef" [ngTemplateOutlet]="headerTemplateRef" [ngTemplateOutletContext]="{$implicit:rowDetail}" > </ng-container> </li>child.component.ts
@ContentChild('header',{static: false}) headerTemplateRef: TemplateRef<any>;padre.componente.html
<child-app [data]="data"> <ng-template let-rowDetail #header> <div style="padding-left:35px;"> <div>{{rowDetail.name}}</div> </div> </ng-template> </child-app>Es posible, pero probablemente no produzca el resultado deseado. Los niños pasados por el padre solo pueden proyectarse una vez (sin importar cuántos <ng-content> haya. Si los elementos <ng-content> no seleccionan partes específicas y diferentes de los niños pasados usando el atributo de select , entonces todo es proyectado al primer <ng-content> con el selector predeterminado (ninguno).
Para que esto funcione, probablemente desee un ngFor personalizado que repita el contenido pasado a <ng-content> .
NgFor s ngForTemplate podría ayudar en su caso de uso.
Consulte también el componente secundario de Angular2 como datos