Angular 2 - ngfor 没有包装在容器中

Question

我希望有一个 ul 元素，然后在我的 json 中，我有 html，其中包含来自各种社交媒体网站的列表 (li) 元素。当我将 ngfor 放在列表项上时，会为每个输出的 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>"
    }],
}

我的 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 而不是纯文本，因为它似乎出来了

Answer 1

在某些情况下，<ng-container> 可能有用。喜欢（不适用于这个特定问题）：

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

在 DOM 中，它的内容照常呈现，但 the tag itself is rendered as an HTML comment。

来自the documentation：

用<ng-container> 对兄弟元素进行分组

[...]

<ng-container> 救援

Angular <ng-container> 是一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放入 DOM。

Answer 2

你可以使用outerHTML

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

Plunker example

Answer 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 中）

编辑

这行得通：

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

看到这个 plunkr：https://plnkr.co/edit/VJWV9Kfh15O4KO8NLNP3?p=preview