*ngIf und lokalen template-Variablen
Könnte mir bitte jemand erklären, was sich hinter den folgenden Verhaltensweisen?
Sagen, wir haben eine Eckige 2-Komponente, die eine _model
Objekt. Dann in der Vorlage haben wir diese:
<form>
<input type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2" #myInput >
<br>Class: {{myInput?.className}}
</form>
Den _model
verfügbar ist von Anfang an seins von Grund auf neu erstellt in ngOnInit()
. Das input-Feld ist ordnungsgemäß ausgefüllt mit der _model.firstName
variable und die Zeile:
<br>Class: {{myInput?.className}}
richtig rendert die folgenden in der Vorlage:
Class: form-control ng-untouched ng-pristine ng-invalid
.
So weit So gut. Was mich verwirrt ist, dass ich in dem moment hinzufügen *ngIf
und ich ändern Sie das Eingabefeld, um
<input *ngIf="_model" type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2" #myInput >
Den doppelten geschweiften Klammern interpolation nicht mehr funktioniert, weil anscheinend die lokale myInput
variable nicht initialisiert, auch wenn sonst nichts in dem code-änderungen, die _model object
wird noch erstellt onNgInit()
und das Eingabefeld ist noch einwandfrei. Die einzige Sache, die {{myInput?.className}}
macht ist
Class:
Kann mir jemand erklären, was Los ist und/oder zeigen Sie mir die richtige Stück von Dokumentation für diese?
EDIT:
Hier ein Plunker, die zeigt, dass das Thema in Frage.
Erstellten bug-report https://github.com/angular/angular/issues/8087
- ist Ihre _model ein boolean?
- Es gerade getestet in meiner Anwendung, und ich kann es reproduzieren Sie Ihr Problem. Irgendwie
#myInput
bekommtundefined
nach dem hinzufügen*ngIf
. Das fühlt sich an wie ein angular2 bug, oder muss jemand kommen mit einer guten Erklärung. - Sie können sich allerdings das element mit
@ViewChild('myInput') myInputRef : ElementRef;
, undClass: {{myInputRef?.nativeElement?.className}}
, aber das fühlt sich nicht an wie ein passender Ansatz - Ich werde einen bug mit der Angular2 Jungs - Sie werden wissen, wenn das erwartete Verhalten oder ein Problem. Ich habe mittlerweile aktualisiert, das original post mit einem plunker.
- versuchen Sie, lange form
ngIf
Richtlinie, surroundinput
mit<template [ngIf]="_model"> ... </template>
tag. - Danke @tchelidze aber das scheint nicht zu funktionieren.
- das ist interessant, es funktioniert nicht, aber trotzdem interessant
- sagen wir, wir verwenden
ngFor
Richtlinie stattngIf
Benennung eines Elements und mit diesem Namen außerhalb derngFor
Kontext nicht sinnvoll (da gibt es möglicherweise, dass ein element mit diesem Namen). gleiche gilt hier, Betrachten folgenden, element ' s name wird innerhalb der strukturellen Richtlinie Kontext, aber nicht außerhalb. Dies macht Sinn, da die Winkel nicht wissen kann, ob eine spezifische Richtlinie wiederholt seine Vorlage oder nicht. - Klingt wie eine Erklärung
Du musst angemeldet sein, um einen Kommentar abzugeben.
*ngIf wird/erweitert
So lokale template-Variablen
#myInput
kann nur verwiesen werden, die innerhalb der template-block (D. H., Geschwister-und/oder child-Elemente). Daher müssten Sie, um alle HTML-will-Referenz die lokale template-Variablen in der Vorlage:Plunker
Wenn Sie müssen etwas zeigen, die außerhalb der template-block bezogen auf die Eingabe, verwenden Sie
@ViewChildren('myInput') list:QueryList<ElementRef>
und dann abonnieren Veränderungen:Mehr sehen QueryList Methoden in der API-doc.