angulaire 2 (changement) de l'événement ne se déclenche pas

J'ai la fonction suivante dans mon composant:

onProductSelect(e){
        var attrs = document.getElementById('firstAttr');        
        return this.groupComponentSvs.getProduct(e.target.value)
                      .subscribe(
                            selectProduct=>{                                
                                this.selectProduct=selectProduct; 
                                var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>";
                                console.log(select);
                                    select+= '<option value="0">Select</option>';
                                for (var i=0; i<selectProduct.values.length; i++)  {
                                    select+= '<option value='+ selectProduct.values[i]+ '>'+ selectProduct.values[i] +'</option>';
                                }  
                                select+='</select>' ;                                
                                attrs.innerHTML = '<div id=attr_'+ selectProduct.attribute +'>'+ select +'</div>';                              
                                error=>this.errorMessage = <any>error
                            }                            
                )                 

    }

selectNextAttr(attr, val){
 console.log("this is a test");
}

Je suis en mesure d'insérer dans le menu select dans ma page html, mais le changement de l'événement n'est pas déclenché avec I pour sélectionner un élément. Quelqu'un peut-il me faire savoir pourquoi ce qui se passe?

Grâce

  • Veuillez nous faire part de votre code HTML
  • Oui, bien sûr il y a un problème avec (change) événement Angulaire 2. Il fonctionne même que (blur) si vous remarquez attentivement.. Oui, vous pouvez utiliser (ngModelChange) qui déclenche dès qu'il y a un peu de changement dans l'entrée de l'utilisateur
InformationsquelleAutor aej1973 | 2017-05-10
  1. 7

    HTML ajoutés à l'aide de [innerHTML]="..." est pas traités par Angulaire et les liaisons, les composants, les directives ne sont pas créés pour ces HTML.
    La seule chose que Angulaires fait avec une telle HTML est de désinfection pour des raisons de sécurité.

    Par conséquent, vous ne pouvez pas utiliser [ngModel]="..." ou (ngModelChange)="..."

    Un moyen de traiter avec de telles exigences est de créer dynamiquement des composants à l'exécution et à l'utilisation de l'HTML en tant que modèle pour un tel composant.
    Voir L'équivalent de $compiler Angulaire 2 pour la façon dont cela peut être fait.

    InformationsquelleAutor Günter Zöchbauer
  2. 4

    Vérifier cette réponse: https://stackoverflow.com/a/33716321/2114024

    Essayer:

    <select [ngModel]='selectedProduct' 
        class='form-control' 
        [id]='"+ selectProduct.attribute +"' 
        (ngModelChange)='selectNextAttr($event)' name='selectProd'>
    • Merci pour pour en revenir à moi, ne semble toujours pas de travail. Si je fais ce qui suit, il fonctionne, mais j'ai besoin d'ajouter dynamiquement à l'aide de ts:
    • Code HTML: <select class="form-control" id="{{selectProduct.attribut}}" (modifier)="selectNextAttr(selectProduct.attribut,selectProduct.product_id)" name="selectProd"> <option value="0">Sélectionnez</option> <option *ngFor = "laissez-prod de selectProduct.les valeurs" value="{{prod}}">{{prod}}</option> </select>
    • TS:onProductSelect(e){ //var attrs = document.getElementById ("firstAttr'); return cette.groupComponentSvs.getProduct(e.cible.valeur) .abonnez-vous( selectProduct=>{ cette.selectProduct=selectProduct; erreur=>ce.errorMessage = <aucun>erreur } ) }
    InformationsquelleAutor Malick
  3. 0

    Vous devez utiliser ngModelChange au lieu de change

     "<select class='form-control' id='"+ selectProduct.attribute +"' (ngModelChange)='selectNextAttr($event)' name='selectProd'>"
    • Essayé, mais ça ne fonctionne toujours pas.
    InformationsquelleAutor Sajeetharan
  4. 0

    Votre méthode:

    selectNextAttr(attr, val) {
  console.log("this is a test");
}

    C'est attend 2 paramètres, alors que dans l'utilisation que vous avez passé un seul:

    var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>";

    Si vous souhaitez obtenir uniquement la valeur de l'élément sélectionné, le changement de la méthode de la signature ci-dessous.

    selectNextAttr(event) {
  //this will give the selected item value.
  console.log("this is a test", event.target.value);
}
    InformationsquelleAutor user2306594