typescript - angular 2 (change) händelse utlöses inte

Jag har följande funktion i min komponent:

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");
}

Jag kan infoga rullgardinsmenyn på min HTML-sida, men ändringshändelsen utlöses inte när jag väljer ett objekt. Kan någon berätta varför detta händer?

Tack

Svar #1

HTML som läggs till med [innerHTML]="..." behandlas inte på något sätt av Angular och bindningar, komponenter, direktiv skapas inte för sådan HTML. Det enda Angular gör med sådan HTML är sanering för säkerhetsändamål.

Därför kan du inte använda [ngModel]="..." eller (ngModelChange)="..."

Ett sätt att hantera sådana krav är att dynamiskt skapa komponenter vid körning och använda den skapade HTML:en som en mall för en sådan komponent. Se Motsvarigheten till $compile i Angular 2 för hur detta kan göras.

Svar #2

Kolla på detta svar: https://stackoverflow.com/a/33716321/2114024

Försök :

<select [ngModel]='selectedProduct' 
        class='form-control' 
        [id]='"+ selectProduct.attribute +"' 
        (ngModelChange)='selectNextAttr($event)' name='selectProd'>

Relaterade artiklar