Angular 2 - ngfor sans emballage dans un récipient

Question

Je souhaite avoir un élément ul et puis dans mon json j'ai html contenant la liste (li) les éléments provenant de divers sites de médias sociaux.. quand j'ai mis ngfor sur les éléments de la liste est crée plusieurs ul pour chaque sortie json dossiers.. est-il possible de juste à la sortie de la li en tant que html et non pas de les encapsuler dans un élément

petit échantillon de mon json

{
    "courses": [{
        "tile_id": 0,
        "tile_content": "<li class=\"grid-item horiz-double blog-tile\" data-item-id=\"0\">yrdy<\/li>"
    }],
}

petit échantillon de mes angulaire de service - cela fonctionne parfaitement et les sorties de l'json, mais peut-être im manque une sorte de paramètre de mise en forme

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.'));

}

et mon code html

<ul class="list-group" *ngFor="#course of courses | async">
      {{ course.tile_content }}
</ul>

l'objectif est de ne pas avoir le ngfor sortie d'un wrapper et aussi pour afficher le résultat au format html plutôt qu'en texte brut tel qu'il apparaît à venir

Answer 1

Dans certains cas, <ng-container> peut être utile. Comme (pas pour cette question):

<ng-container *ngFor="let item of items; let i = index">
  ...
</ng-container>

Dans les DOM, son contenu est rendu comme d'habitude, mais la balise est lui-même rendu qu'un commentaire HTML.

À partir de la documentation:

Groupe frère des éléments avec <ng-container>

[...]

<ng-container> à la rescousse

L'Angulaire <ng-container> est un élément de regroupement qui n'interfère pas avec les styles ou de mise en page, car Angulaire de ne pas le mettre dans les DOM.

Answer 2

Pas sûr de comprendre ce que vous voulez / essayer de le faire, mais vous pouvez faire quelque chose comme ceci:

<ul class="list-group">
  <li *ngFor="#course of courses | async">
    {{ course.tile_content }}
  </li>
</ul>

Notez que la syntaxe étendue pourrait également être utilisé:

<template ngFor [ngForOf]="courses | async" #course>
  {{ course.tile_content }}
</template>

(la balise de modèle ne sera pas ajouté dans le code HTML)

Modifier

Ceci fonctionne:

<ul *ngFor="#elt of elements | async" [innerHTML]="elt.title">
</ul>

Voir ce plunkr: https://plnkr.co/edit/VJWV9Kfh15O4KO8NLNP3?p=preview

Answer 3

Vous pouvez utiliser outerHTML

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

Exemple Plunker