プログラムでAngular2でHtmlローカル変数を作成する

Question

プログラムでHTMLローカル変数を作成する方法があるかどうかを知る必要があります。

私はNgForループを持っているWebアプリケーションを開発しており、NgForで作成された各サブ要素にローカル変数を割り当てることができます。

すなわち：

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

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

上記exempleは私が達成しようとしている何を示していると明らかに動作しません。 これを達成する方法はありますか？

ありがとうございます。

編集：私はそれそのようにする理由

（と私は私の質問を読むために時間を取って、それに答えることを試みたすべての人に感謝）私が得た答えを見た後、私はもう少し説明します。

DynamicComponentLoaderのloadIntoLocation()を使用します。 その関数は3番目のパラメータとして、アンカーを参照する文字列を取得しました（つまり、html要素の#test）。それで私はelt.titleの名前と同じ名前のローカル変数を作成する必要があります。

Answer 1

式を処理するので、テンプレート補間にスティックすることができます。

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

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

Answer 2

ローカル変数（#文字で定義）は、使用例には当てはまりません。

実際、HTML要素にローカル変数を定義すると、それはコンポーネントが存在する場合に対応します。要素に要素がない場合、変数は要素自体を参照します。

ローカル変数の値を指定すると、現在の要素に関連付けられている特定のディレクティブを選択できます。例えば：

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

はname変数に現在関連付けられngForm指令のインスタンスを設定します。

ローカル変数は、ループの現在の要素に対して作成された値を設定することを目的としていません。

あなたがそのような何かをしようとした場合：

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

あなたはこの次のエラーがあります：

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は、実際にここに提供された名前elt.titleに一致するディレクティブを探します）... https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

このリンクを参照してください：http://victorsavkin.com/post/119943127151/angular-2-template-syntax、詳細については、「ローカル変数」を参照してください。 etails。index、last、evenとodd：

反復の現在の要素に加えて、ngFormはローカル変数にエイリアスすることができるエクスポート値のセットを提供します。

このリンクを参照してください：あなたは何ができるかhttps://angular.io/docs/ts/latest/api/common/NgFor-directive.html

---

は、ループ内の要素を表示するサブコンポーネントを作成することです。現在の要素をパラメータとして受け入れ、コンポーネントの属性として "ローカル変数"を作成します。この属性はコンポーネントのテンプレートで使用できるため、ループ内の要素ごとに1回作成されます。ここではサンプルです：

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

し、それを使用する方法：

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

---

編集が

あなたのコメントの後、私はあなたがこの中に記載されているアプローチを試みることを考えます回答。詳細はこちらcreate dynamic anchorName/Components with ComponentResolver and ngFor in Angular2です。

はティエリー