2017-07-18 11 views
0

Disons que je récupère une [chaîne] de codes HTML de MongoDB tels queangulaire tapuscrit innerHTML de liaison pour les composants d'entrée

["<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text0 index=gen > </span> </div>", 
"<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text1 index=gen > </span> </div>"] 

et je traite, je Désinfectez et que vous souhaitez en faire une forme avec toutes les fonctionnalités!

mon code html:

<p> 
    DATA: 
{{this.id}} 
</p> 
<span *ngFor="let item of this.code;let x= index;"><div [innerHTML]="sanitizer.bypassSecurityTrustHtml(this.code[x])" ></div> 
    {{this.item}}<br> 
    WORK GOdDAMMIT!!: {{text0}} 

</span> 

Je text0 codé en dur pour voir si elle décide de travailler!

En ce moment, pourriez-vous me donner un exemple de base sur comment accéder à la valeur ngModel pour que je puisse le faire?

Dans AngularJS (v1.6) j'ai réussi à le faire avec un module externe appelé bind-html-compiler

Les petits exemples ou tel serait très bénéfique!

Si vous voulez jeter un oeil à mes component.ts, ici:

@Component({ 
    selector: 'app-form-show', 
    templateUrl: './form-show.component.html', 
    styleUrls: ['./form-show.component.css'], 
    providers: [FormShowService] 
}) 
export class FormShowComponent implements OnInit { 
    private id:string; 
    private code:string; 
    //private htmlCode :HTML 
    constructor(
    private http: Http, 
    private router: Router, 
    private route : ActivatedRoute, 
    private sanitizer: DomSanitizer 
) { 

    } 

    ngOnInit(){ 
     //console.log(this.Code) 
     console.log(this.route.params['value'].id); 
     this.id=this.route.params['value'].id 
     this.getID(); 
    } 

getID(){ 
    let jsonData : JSON; 
    jsonData=JSON.parse('{"data" :"'+ this.id +'"}'); 

    return this.http.post('/api/getInfo', jsonData).subscribe(
    res => {res.json(); 
     console.log(res.json()); 
     let resProc = res.json(); 
     console.log(resProc); 
     this.code=resProc[0].script; 
     console.log(this.code); 
     }); 

} 



} 

Merci!

Répondre

0

J'ai une solution beaucoup plus simple pour vous et tous ceux qui pourraient rencontrer une situation similaire. J'ai essayé Viewcontainerreff mais, en vain. Après avoir cherché dans npm.js, je crois que tout ce dont vous avez besoin est ce paquet !

The Fantabulous ng-dynamic

et son usage est aussi assez simple:

<div *dynamicComponent="your_html_string">loadin</div> 

Il fonctionne avec angular4 directives et est tout ce qu'il faut à cette fin!

Bonne chance

~ Ronny McNamara