Estoy tratando de analizar una cadena html con una directiva estructural dentro ng-template . Pero se muestra como una cadena. Mis excepciones fueron que la directiva estructural iterará tres veces y mostrará tres li . ¿Cómo puedo lograr eso?
Aquí está mi código
import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { data = `<div><li *ngFor="let d of [1,2,3]">{{d}}</li> </div>`; } <section> <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ html: data }" ></ng-container> </section> <ng-template #template let-html="html"> {{ html }} </ng-template>Sugeriría que realice la interpolación en el controlador mismo, no creo que la interpolación funcione en la inserción de cadenas.
import { Component, OnInit, Sanitizer, VERSION } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { data: any = `<div>${[1, 2, 3].map((x) => `<li>${x}</li>`).join('')}</div>`; constructor(private sanitizer: DomSanitizer) {} ngOnInit() { this.data = this.sanitizer.bypassSecurityTrustHtml(this.data); } }html
<section> <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ html: data }" ></ng-container> </section> <ng-template #template let-html="html" > <div [innerHTML]="html"></div> </ng-template>