navigationend - Angular 2-ngpara sin envolver en un recipiente
router events angular 6 (3)
Deseo que tenga un elemento ul y luego, en mi json, tengo html que contiene elementos de la lista (li) de varios sitios de redes sociales. Es posible simplemente generar cada uno de los Li como html y no envolverlos en un elemento.
pequeña muestra de mi json
{
"courses": [{
"tile_id": 0,
"tile_content": "<li class=/"grid-item horiz-double blog-tile/" data-item-id=/"0/">yrdy<//li>"
}],
}
pequeña muestra de mi servicio angular - esto funciona perfectamente y genera el json pero tal vez me falte algún tipo de configuración de formato
public getCourses() {
this._http.get(this.apiUrl).map(response => response.json()).subscribe(data => {
// console.log( data.courses );
this._dataStore.courses = data.courses;
// console.log(this._coursesObserverXX);
this._coursesObserverXX.next(this._dataStore.courses);
}, error => console.log(''Could not load courses.''));
}
y mi html
<ul class="list-group" *ngFor="#course of courses | async">
{{ course.tile_content }}
</ul>
el objetivo es no tener el ng para generar un envoltorio y también mostrar el resultado como html en lugar de texto sin formato como parece que sale.
En algunos casos, <ng-container> puede ser útil. Me gusta (no para esta pregunta específica):
<ng-container *ngFor="let item of items; let i = index">
...
</ng-container>
En el DOM, su contenido se representa como de costumbre, pero la etiqueta en sí se representa como un comentario HTML .
De la documentación :
Agrupar elementos hermanos con
<ng-container>[...]
<ng-container>al rescateAngular
<ng-container>es un elemento de agrupación que no interfiere con los estilos o el diseño porque Angular no lo coloca en el DOM.
No estoy seguro de entender lo que quieres o intentar hacer, pero puedes hacer algo como esto:
<ul class="list-group">
<li *ngFor="#course of courses | async">
{{ course.tile_content }}
</li>
</ul>
Tenga en cuenta que la sintaxis expandida también podría usarse:
<template ngFor [ngForOf]="courses | async" #course>
{{ course.tile_content }}
</template>
(la etiqueta de la plantilla no se agregará al HTML)
Editar
Esto funciona:
<ul *ngFor="#elt of elements | async" [innerHTML]="elt.title">
</ul>
Vea este plunkr: https://plnkr.co/edit/VJWV9Kfh15O4KO8NLNP3?p=preview
Puedes usar outerHTML
<ul class="list-group" >
<li *ngFor="let course of courses | async" [outerHtml]="course.tile_content"></li>
</ul>