Angular 2-ngfor，不包装在容器中 [英] Angular 2 - ngfor without wrapping in a container

问题描述

我希望有一个ul元素，然后在我的json中，我有html，其中包含来自各种社交媒体网站的列表(li)元素..当我将ngfor放在列表项上时，会为每个输出的json记录创建多个ul. ..是否可以将每个li都输出为纯html而不将它们包装在一个元素中

I wish the have a ul element and then in my json I have html containing list (li) elements from various social media sites.. when I put ngfor on the list items is creates multiple ul's for each of the outputted json records.. is it possible just to output each of the li's as plain html and not wrap them in an element

我的json的小样本

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

我的角度服务的小样本-可以完美地工作并输出json，但可能我缺少某种格式设置

small sample of my angular service - this works perfectly and outputs the json but maybe im missing some kind of formatting setting

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而不是明文显示为纯文本

the goal is to not have the ngfor output a wrapper and also to display the output as plain html rather than plaintext as it appears to come out

推荐答案

您可以使用outerHTML

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

柱塞示例

这篇关于Angular 2-ngfor，不包装在容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！