Sólo me preguntaba si esto es del todo posible
El escenario es: Quiero crear un componente de lista usando *ngFor , pero quiero que *ngFor incrustado en el componente mismo
foo-list-items.html (componente)
<ul> <li *ngFor="let item of list" (click)="goto(item)"> {{ item.name }}<br /> <small> Email: {{ item.email }} </small> </li> </ul> ¿Sería posible con @Input() name:any hacer que la propiedad del nombre en bucle se base en una entrada del componente principal?
Entonces en el html uno podría escribir
HTML padre
<foo-list-items [list]="usersList" (onItemClicked)="gotoUser($event)" [name]="item.name"> </foo-list-items> Donde [name]="item.name" es la propiedad dinámica que se pasa al componente secundario, con el que hacer referencia en el ciclo.
Entonces, por ejemplo, si uno tiene 2 listas
Lista de usuarios
Lista de programas
Sin embargo, los datos para la propiedad de name son .name para la lista de usuarios y .programName para la lista de programas. ¿Puede definir la propiedad para el elemento en el bucle *ngFor como un valor de entrada en el componente principal?
Entonces, básicamente, crear un *ngFor genérico sin importar cuál sea el nombre del item.name . El nombre en el ciclo, del componente secundario, se mostrará para item.name o item.programName
Puede pasar una cadena como propiedad de entrada al componente foo-list-items como:
<foo-list-items [list]="usersList" (onItemClicked)="gotoUser($event)" [name]="'name'"> </foo-list-items>o
<foo-list-items [list]="programList" (onItemClicked)="gotoUser($event)" [name]="'programName'"> </foo-list-items> y luego en la plantilla del componente use la clave de matriz ( object['property'] ) en lugar de la notación de puntos:
<ul> <li *ngFor="let item of list" (click)="goto(item)"> {{ item[name] }}<br /> <small> Email: {{ item.email }} </small> </li> </ul>