Angular 2 - ngfor без упаковки в контейнер

Я хочу, чтобы у меня был элемент ul, а затем в моем json. У меня есть html, содержащий элементы списка (li) на разных сайтах социальных сетей. Когда я помещаю ngfor в элементы списка, создается несколько ul для каждой из выведенных json-записей.. возможно ли просто вывести каждый из li как простой html и не обернуть их в элемент

небольшой образец моего json

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

небольшой образец моего сервиса angular - это отлично работает и выводит json, но, возможно, им не хватает какой-либо настройки форматирования

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

    }

и мой html

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

цель состоит в том, чтобы не было вывода ngfor для оболочки, а также для отображения вывода как обычного html, а не открытого текста, поскольку он, кажется, выходит

ОТВЕТЫ

Ответ 1

Вы можете использовать outerHTML

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

Пример плунжера

Ответ 2

В некоторых случаях может оказаться полезным <ng-container>. Например (не для этого конкретного вопроса):

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

В DOM его содержимое отображается как обычно, но сам тег отображается как комментарий HTML.

Из документация:

Элементы группового брата с <ng-container>

[...]

<ng-container> для спасения

Angular <ng-container> - это элемент группировки, который не мешает стилям или макету, потому что Angular не помещает его в DOM.

Ответ 3

Не уверен, что вы понимаете, чего хотите/пытаетесь сделать, но вы можете сделать что-то вроде этого:

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

Обратите внимание, что расширенный синтаксис также можно использовать:

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

(тег шаблона не будет добавлен в HTML)

Edit

Это работает:

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

Смотрите этот plunkr: https://plnkr.co/edit/VJWV9Kfh15O4KO8NLNP3?p=preview