web-dev-qa-db-fra.com

* ngIf et variables de modèle local

Quelqu'un pourrait-il expliquer ce qui se cache derrière le comportement suivant?

Disons que nous avons un composant Angular 2 qui a un objet _model. Ensuite, dans le modèle, nous avons ceci:

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

Le _model Est disponible depuis le début en cours de création à partir de zéro dans ngOnInit(). Le champ de saisie est correctement rempli avec la variable _model.firstName Et la ligne:

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

rend correctement les éléments suivants dans le modèle:

Class: form-control ng-untouched ng-pristine ng-invalid.

Jusqu'ici tout va bien. Ce qui m'embrouille, c'est qu'au moment où j'ajoute *ngIf Et que je change le champ de saisie en

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

L'interpolation à double accolade ne fonctionne plus car apparemment la variable locale myInput n'est pas initialisée même lorsque rien d'autre dans le code ne change, le _model object Est toujours créé dans onNgInit() et le champ de saisie fonctionne toujours correctement. La seule chose que le {{myInput?.className}} Rend est

Class:

Quelqu'un peut-il expliquer ce qui se passe et/ou me diriger vers la bonne documentation pour cela?

MODIFIER:

Voici un Plunker qui montre le problème en question.

Rapport de bogue créé https://github.com/angular/angular/issues/8087

angularinterpolation
15
RVP

Nous pouvons référencer une variable de modèle locale sur le même élément, sur un élément frère ou sur n'importe quel élément enfant. - réf

* ngIf devient/se développe en

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

La variable de modèle locale #myInput Ne peut donc être référencée qu'à l'intérieur du bloc de modèle (c'est-à-dire les éléments frères et/ou enfants). Par conséquent, vous devrez mettre tout HTML qui veut référencer la variable de modèle local à l'intérieur du modèle:

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

Plunker

Si vous devez afficher quelque chose en dehors du bloc de modèle lié à l'entrée, utilisez @ViewChildren('myInput') list:QueryList<ElementRef> puis abonnez-vous aux modifications:

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

Voir plus de méthodes QueryList dans le API doc .

33
Mark Rajcok