angular - number - ng2: Cómo crear una variable en el bucle ngFor

ngfor table angular 5

Question

Estoy intentando descubrir cómo crear una variable en un bucle ngFor.

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 "getBuild" tiene que repetirse varias veces. (muchas más veces en mi ejemplo actual). Me gustaría una forma de crear esta variable en la plantilla una vez dentro del bucle y simplemente reutilizarla. ¿Hay alguna forma de hacer esto?

Answer 1

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>

Answer 2

Creo que este es un caso clásico para hacer un subcomponente.

<td *ngFor="#prod of products">
    <subComp [prod]=prod></subComp>
</td>

Su componente tendrá una entrada de prod y ejecutará la función requerida una vez en OnInit .

Un simple ejemplo here

Answer 3

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 hubiera. Cuando no hay ningún componente en el elemento, la variable se refiere al elemento en sí.

La especificación de 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 corriente en la variable de name .

Por lo tanto, las variables locales no tienen como objetivo lo que desea, es decir, establecer un valor creado para el elemento actual de un ciclo.

Si intentas hacer algo así:

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

Tendrás 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 provisto elt.title aquí) ... Vea este texto 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 pueden ser asignados a las variables locales: index , last , even e odd .

Vea este enlace: https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

Lo que podría hacer es crear un subcomponente para mostrar los elementos en el bucle. 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 bucle. 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>

Answer 4

No, simplemente getBuild en caché el resultado en getBuild para cada combinación de branch / prod o siempre que se llame con los mismos valores que antes.