我希望有一个ul元素,然后在我的json中有包含来自各种社交媒体网站的列表(li)元素的html..当我把ngfor放在列表中时,items for each 输出的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,而不是显示出来的纯文本

推荐答案

你可以用outerHTML

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

Plunker example

Angular相关问答推荐

以Angular 表示显示特殊字符

具有多重签名的Angular Mocking Service

PrimeNG面包屑组件生成奇怪的&

有没有其他代码可以用函数的方式写成Angular ?

Rxjs重置执行后的可观察延迟并重新调度Angular

MAT-复选框更改事件未在onSubscriberCheck函数中返回选中的值

在Angular 17的本地服务应用程序时禁用SSR

使用 BehaviorSubject 从服务更新 Angular 组件

从 angular 11 升级到 angular 12 后,我的项目没有使用优化参数进行编译

单选按钮的Angular2 Reactive Forms formControl

带有嵌套表单数组的 Angular react式表单

Angular 没有可用于依赖类型的模块工厂:ContextElementDependency

Angular CLI 自定义 webpack 配置

样式 html,来自 Web 组件的正文

为什么Angular 12 'ng serve' 构建应用程序的速度很慢?

Angular7 中的 CORS 策略已阻止源http://localhost:4200

Angular 2:为什么在检索路由参数时使用 switchMap?

我应该在 Angular 4+ 应用程序中 for each 组件创建一个模块吗?

ng add 与 npm install 在 Angular 6 中的区别

动态添加/删除验证器