ng2: comment créer une variable dans la boucle ngFor

Je pense que les variables locales (définies avec le caractère #) ne s'appliquent pas à votre cas d'utilisation.

En fait, lorsque vous définissez une variable locale sur un élément HTML, elle correspond au composant le cas échéant. Lorsqu'il n'y a pas de Composant sur l'élément, la variable fait référence à l'élément lui-même.

Spécification d'une valeur pour une variable locale vous permet de sélectionner une directive spécifique associé à l'élément courant. Par exemple:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

Définira l'instance du ngForm directive associée au courant dans la variable name.

Les variables locales ne ciblent donc pas ce que vous voulez, c'est-à-dire définir une valeur créée pour l'élément courant d'une boucle.

Si vous essayez de faire quelque chose comme ça:

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

, Vous aurez cette erreur suivante:

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 recherche en fait une directive correspondant au nom fourni elt.title ici)... Voir ce plunkr pour reproduire l'erreur: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

, Voir ce lien: http://victorsavkin.com/post/119943127151/angular-2-template-syntax, section "variables Locales" pour plus de détails.

En plus de l'élément courant de l'itération, ngFor fournit uniquement un ensemble de valeurs exportées qui peuvent être aliasées en variables locales: index, last, even et odd.

Voir ce lien: https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

Ce que vous pouvez faire est de créer un sous-composant pour afficher les éléments dans la boucle. Il acceptera l'élément courant comme paramètre et créera votre "variable locale" comme attribut du composant. Vous pourrez alors utiliser cet attribut dans le modèle du composant afin qu'il soit créé une fois par élément dans la boucle. Voici un exemple:

@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;
  }
}

Et la façon de l'utiliser:

<div *ngFor="#elt of eltList" >
  <elt [element]="elt></elt>
</div>