使用Angular2以編程方式創建Html局部變量

Question

我需要知道是否有一種以編程方式創建HTML本地變量的方法。

我正在開發一個Web應用程序，我有一個NgFor循環，我希望能夠為NgFor創建的每個子元素分配一個局部變量。

即：

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

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

上面的例子顯示了我想要完成的事情，顯然不起作用。 有沒有辦法實現這個目標？

先感謝您。

編輯：

看到我得到的答案后（我感謝所有花時間閱讀我的問題並嘗試回答的人）我會再解釋一下為什么我會這樣想。

我將使用： DynamicComponentLoader loadIntoLocation() 。 該函數作為第3個參數得到一個引用錨點的字符串（即：html元素中的#test ）。 這就是為什么我需要創建名稱等於我的elt.title名稱的局部變量。

Answer 1

我認為局部變量（用#字符定義）不適用於您的用例。

實際上，當您在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相匹配的指令... ...請參閱此plunkr以重現錯誤： https ：//plnkr.co/edit/qcMGr9FS7yQD8LbX18uY？p = preview

有關詳細信息，請參閱此鏈接： http ： //victorsavkin.com/post/119943127151/angular-2-template-syntax ，“局部變量”部分。

除了迭代的當前元素之外， ngForm僅提供一組導出值，這些值可以別名為局部變量： index ， last ， even和odd 。

請看以下鏈接： https ： //angular.io/docs/ts/latest/api/common/NgFor-directive.html

---

你可以做的是創建一個子組件來顯示循環中的元素。 它將接受當前元素作為參數，並創建“局部變量”作為組件的屬性。 然后，您就可以在組件的模板中使用此屬性，以便在循環中為每個元素創建一次。 這是一個示例：

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

---

編輯

在你的評論之后，我認為你嘗試了這個答案中描述的方法。 以下是更多詳細信息： 在Angular2中使用ComponentResolver和ngFor創建動態anchorName / Components 。

希望它對你有幫助，蒂埃里

Answer 2

您可以將其粘貼到模板插值中，因為它處理表達式。

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

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