角度2 - ngfor没有包装在容器中

Question

我希望有一个ul元素,然后在我的json中我有html包含来自各种社交媒体网站的列表(li)元素..当我在列表中放置项目时,为每个输出的json记录创建多个ul ..是它可以只输出每个li作为普通的html而不是将它们包装在一个元素中

我的json的小样本

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

我的角度服务的小样本 - 这完美地工作并输出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而不是纯文本,因为它似乎出来了

Answer 1

在某些情况下,<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中.

Answer 2

不确定你想要/尝试做什么,但你可以做这样的事情:

<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中)

编辑

这有效:

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

请参阅此plunkr:https://plnkr.co/edit/VJWV9Kfh15O4KO8NLNP3 ？ p = preview

Answer 3

您可以使用 outerHTML

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

Plunker 示例