navigationend - Angular 2-ngpara sin envolver en un recipiente

router events angular 6

Question

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.

Answer 1

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 rescate

Angular <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.

Answer 2

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

Answer 3

Puedes usar outerHTML

<ul class="list-group" >
  <li *ngFor="let course of courses | async" [outerHtml]="course.tile_content"></li>
</ul>

Ejemplo de plunker