Estoy tratando de averiguar cómo crear una variable en un ngFor loop
.
Tengo un bucle como este:
<td *ngFor="#prod of products"> <a href="{{getBuild(branch,prod)?.url}}"> {{getBuild(branch,prod)?.status}} </a> </td>
Puede ver que la llamada a getBuild
debe repetirse varias veces. (Muchas veces más en mi ejemplo real). Me gustaría una forma de crear esta variable en la plantilla una vez dentro del ciclo y simplemente reutilizarla.
¿Hay alguna forma de hacer esto?
Creo que las variables locales (definidas con el carácter #
) no se aplican a su caso de uso.
De hecho, cuando define una variable local en un elemento HTML, corresponde al componente, si lo hay. Cuando no hay ningún componente en el elemento, la variable se refiere al elemento mismo.
Especificar un valor para una variable local le permite seleccionar una directiva específica asociada con el elemento actual. Por ejemplo:
<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>
establecerá la instancia de la directiva ngForm
asociada con la variable actual en el name
.
Entonces, las variables locales no apuntan a lo que desea, es decir, establecer un valor creado para el elemento actual de un bucle.
Si intentas hacer algo así:
<div *ngFor="#elt of eltList" > <span #localVariable="elt.title"></span> {{localVariable}} </div>
Tendrá este siguiente error:
Error: Template parse errors: There is no directive with "exportAs" set to "elt.title" (" <div *ngFor="#elt of eltList" > <span [ERROR ->]#localVariable="elt.title"></span> {{localVariable}} </div> "): AppComponent@2:10
Angular2 en realidad busca una directiva que coincida con el nombre proporcionado elt.title
aquí)... Vea este plunkr para reproducir el error: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview
Consulte este enlace: http://victorsavkin.com/post/119943127151/angular-2-template-syntax , sección "Variables locales" para obtener más detalles.
Además del elemento actual de la iteración, ngFor
solo proporciona un conjunto de valores exportados que se pueden asociar a variables locales: index
, last
, even
e odd
.
Consulte este enlace: https://angular.io/docs/ts/latest/api/common/NgFor-directive.html
Lo que podría hacer es crear un subcomponente para mostrar elementos en el ciclo. Aceptará el elemento actual como parámetro y creará su "variable local" como atributo del componente. Entonces podrá usar este atributo en la plantilla del componente para que se cree una vez por elemento en el ciclo. Aquí hay una muestra:
@Component({ selector: 'elt', template: ` <div>{{attr}}</div> ` }) export class ElementComponent { @Input() element; constructor() { // Your old "localVariable" this.attr = createAttribute(element.title); } createAttribute(_title:string) { // Do some processing return somethingFromTitle; } }
y la forma de usarlo:
<div *ngFor="#elt of eltList" > <elt [element]="elt></elt> </div>
Con angular 4 puedes hacer esto:
<td *ngFor="#prod of products"> <div *ngIf="getBuild(branch,prod); let build"> <a href="{{build.url}}"> {{build.status}} </a> </div> </td>