Creare la variabile locale Html a livello di codice con Angular2

Question

Ho bisogno di sapere se esiste un modo per creare variabili locali HTML a livello di codice.

Sto sviluppando un'applicazione Web in cui ho un ciclo NgFor e voglio essere in grado di assegnare una variabile locale a ciascun elemento secondario creato da NgFor.

cioè:

<div *ngFor="#elt of eltList" > 
    <span #setLocalVariable(elt.title)></span> 
</div> 

setLocalVariable(_title : string){ 
    let var = do some stuff to _title; 
    return var; 
} 

L'exemple sopra vi mostra quello che sto cercando di realizzare e, ovviamente, non funziona. C'è un modo per raggiungere questo obiettivo?

Grazie in anticipo.

Edit:

Dopo aver visto le risposte che ho ricevuto (e ringrazio tutti coloro che hanno avuto il tempo di leggere la mia domanda e ho cercato di rispondere) vi spiego un po 'di più per questo che voglio in questo modo .

Utilizzerò: loadIntoLocation() da DynamicComponentLoader. Questa funzione ha come terzo parametro una stringa che fa riferimento a un'ancora (ad esempio: #test in un elemento html). Ecco perché ho bisogno di creare quelle variabili locali con un nome uguale a quello del mio elt.title.

Answer 1

È possibile inserirlo nell'interpolazione del modello poiché gestisce le espressioni.

<div *ngFor="#elt of eltList" > 
    <span>{{setLocalVariable(#elt)}}</span> 
</div> 

setLocalVariable(_title : string){ 
    let var = do some stuff to _title; 
    return var; 
} 

Answer 2

Penso variabili locali (definiti con il carattere #) non si applicano per il vostro caso d'uso.

Infatti, quando si definisce una variabile locale su un elemento HTML, corrisponde al componente, se presente. Quando non ci sono componenti sull'elemento, la variabile fa riferimento all'elemento stesso.

Specificare un valore per una variabile locale consente di selezionare una direttiva specifica associata all'elemento corrente. Ad esempio:

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

imposterà l'istanza della direttiva ngForm associata alla corrente nella variabile name.

Quindi le variabili locali non mirano a ciò che si desidera, ad esempio impostando un valore creato per l'elemento corrente di un ciclo.

Se si tenta di fare qualcosa di simile:

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

avrete questa seguente errore:

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 cerca in realtà di direttiva che corrisponde al nome fornito elt.title qui) ... Vedere questo plunkr per riprodurre l'errore: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

Vedere questo collegamento: http://victorsavkin.com/post/119943127151/angular-2-template-syntax, sezione "Variabili locali" per ulteriori d etails.

Oltre all'elemento corrente dell'iterazione, ngForm fornisce solo un insieme di valori che possono essere esportati con alias variabili locali: index, last, even e odd.

Vedere questo link: https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

---

Che cosa si potrebbe fare è quello di creare un componente secondaria per visualizzare gli elementi nel ciclo. Accetterà l'elemento corrente come parametro e creerà la tua "variabile locale" come attributo del componente. Sarà quindi possibile utilizzare questo attributo nel modello del componente in modo che venga creato una volta per elemento nel ciclo. Ecco un esempio:

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

e il modo di usarlo:

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

---

Modifica

Dopo il tuo commento, credo che si tenta l'approccio descritto in questo risposta. Ecco ulteriori dettagli: create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2.

Spero che ti aiuta, Thierry