Angulaire 2 - ngfor sans emballage dans un conteneur

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 html 

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

le but 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 à sortir

InformationsquelleAutor Kravitz | 2016-05-03
  1. 4

    Vous pouvez utiliser outerHTML

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

    Plunker exemple

    • Pas tout à fait ce que im après.. vous voyez la balise li seront fournis par le résultat json - j'ai essentiellement besoin de vider le json entre les balises ul comme du html brut
    • Désolé, j'ai oublié de déplacer le *ngFor à la <li> élément. Maintenant, il produit attendu HTML.
    • Avez-vous vérifié le Plunker? C'est maintenant générer <li> qui ne sont pas emballés avec <ul>
    • L'homme acclamations, j'ai fini par utiliser cela comme un point de base et mises au rebut de l'idée de la création d'une nouvelle directive.
    InformationsquelleAutor Günter Zöchbauer
  2. 127

    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.

    De la documentation:

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

    [...]

    <ng-container> à la rescousse

    L'angle de <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 le DOM.

    InformationsquelleAutor Arjan
  3. 5

    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>

    Noter 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

    Cela fonctionne:

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

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

    • La deuxième option est probablement plus ce que je cherche... je cherche juste à vider le json dans entre les balises ul.. vais le faire de cette façon de sortie du html brut et dois-je utiliser la deuxième méthode, en faisant une directive... désolé assez nouveau pour angulaires donc je peut-être en utilisant le mauvais terme
    • Pas de soucis. À l'aide de la innerHTML l'attribut est possible au niveau de la ngFor 😉 j'ai mis à jour ma réponse...
    • J'ai ajouté un plunkr la démonstration de cette
    • Merci mec, j'ai donc fait une nouvelle directive, et ce travail est pour moi @Composant({ sélecteur: "socio-mur", modèle: <template ngFor [ngForOf]="socialwall | async" #social > {{ social.tile_content }} </template>, }) mais ce n'est pas simple html aucune idée de comment je travail à ce niveau
    • Je pense que le innerHTML attribut que vous devriez utiliser. Il vous permettra d'afficher le code HTML...
    • Quand je l'ajouter à la longue la syntaxe du modèle il ne marche pas, en fait, il se casse, vous avez un exemple de la façon dont il pourrait travailler avec elle

    InformationsquelleAutor Thierry Templier