我有这样的json响应
{
_id: '5dd0d0dc4db1cf9c77781aaa',
picture: 'http://placehold.it/32x32',
name: 'Graciela Mcmahon',
guid: '98c0fcc2-1dfc-4974-bdae-d8263d783e0a',
star:
'<mat-icon>star</mat-icon><mat-icon>star</mat-icon><mat-icon>star_half</mat-icon><mat-icon>star_border</mat-icon><mat-icon>star_border</mat-icon>',
}
当我开始渲染时,它没有按预期渲染 我的组件代码
<owl-carousel-o [options]="listingSliderOptions" class="row">
<ng-container *ngFor="let listing of listingJson">
<ng-template carouselSlide [id]="listing._id">
<a [routerLink]="['/']" class="listing-grid-item">
<figure>
<img src="{{listing.picture}}" alt="" />
<div class="info">
<div class="cat_star" [innerHTML]="listing.star">
</div>
<h3>{{listing.name}}</h3>
</div>
</figure>
</a>
</ng-template>
</ng-container>
</owl-carousel-o>
这是正确的显示方式还是我必须在Angular组件内生成标签?
预期结果
答案 0 :(得分:3)
您的问题源于您试图在运行时动态加载组件的事实。纯HTML不可能发生这种情况。
阅读this article here了解动态组件加载。 mat-icon
不是html元素,因此浏览器不知道如何处理它,因此您会得到奇怪的结果。
将html加载到您的应用程序中也是一种非常糟糕的安全做法,它来自api,因为可能会注入恶意代码和html。
从您的后端将星星发送为数字。用定义的mat-icon创建一个ngFor,并重复创建星星的次数。
<div class="cat_star">
<ng-container *ngFor="let star of listing.star">
<mat-icon>{{ star }}</mat-icon>
</ng-container>
</div>