Angular2，* ngIf和本地模板變量

可能有人請解釋一下什麼是背後的以下行爲：Angular2，* ngIf和本地模板變量

說，我們有有_model對象的Angular2組件。然後在模板中，我們有這個

<form> 
    <input type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2" #myInput > 
    <br>Class: {{myInput?.className}} 
</form>

_model可以從頭開始在ngOnInit中創建。輸入域正確地與_model.firstName變量和線

<br>Class: {{myInput?.className}}

填充正確呈現在模板

Class: form-control ng-untouched ng-pristine ng-invalid以下。

到目前爲止這麼好。是什麼讓我困惑的是，此刻的我加* ngIf我改變輸入字段

<input *ngIf="_model" type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2" #myInput >

雙花括號內插停止工作，因爲很明顯的地方myInput變量不代碼初始化不出意外，即使更改時，_model對象仍在onNgInit()中創建，並且輸入字段仍然正常工作。該{{myInput?.className}}呈現的唯一的事情是

Class:

有人能解釋這是怎麼回事和/或指向我這樣做的正確的一條文檔編制的？

在此先感謝！

編輯：

這裏有一個plunker顯示問題

http://plnkr.co/edit/itNRpy5lc9PB837C7HdP?p=preview

創建錯誤報告https://github.com/angular/angular/issues/8087

來源

2016-04-15 RVP

是你的_model布爾？ –

你可以做一個笨蛋嗎？ –

剛剛在我的應用程序中進行了測試，我可以重現您的問題。不知何故''myInput'在添加'* ngIf'後會得到'undefined'。這感覺就像一個角度錯誤，或者有人必須提出一個很好的解釋。 – PierreDuc

我們可以在相同的元素引用本地模板變量的問題，在兄弟元素上或在任何子元素上。 - ref

* ngIf變得/擴展到

<template [ngIf]="_model"> 
    <input type="text" class="form-control" required [(ngModel)]="_model.firstName" 
    ngControl="test1" #myInput> 
</template>

所以本地模板變量#myInput只能在模板塊（即，兄弟和/或子元素）內部被引用。因此，你將不得不把想要引用模板中的本地模板變量的任何HTML：

<template [ngIf]="_model"> 
    <input type="text" class="form-control" required [(ngModel)]="_model.firstName" 
    ngControl="test1" #myInput > 
    <br>Class (this works): {{myInput?.className}} 
</template>

Plunker

如果你需要顯示相關的模板塊之外的東西輸入，使用@ViewChildren('myInput') list:QueryList<ElementRef>，然後訂閱更改：

ngAfterViewInit() { 
    this.list.changes.subscribe(newList => 
     console.log('new list size:', newList.length) 
    ) 
}

查看更多Que ryList方法在API doc。

來源

2016-04-15 15:50:11

參見https://github.com/angular/angular/issues/6179 –

Angular2，* ngIf和本地模板變量

回答

相關問題