Angular 如何从角度组件内部的JSON响应中呈现角度材质标记?
我有一个类似这样的json响应Angular 如何从角度组件内部的JSON响应中呈现角度材质标记?,angular,typescript,angular-material,owl-carousel,Angular,Typescript,Angular Material,Owl Carousel,我有一个类似这样的json响应 { _id: '5dd0d0dc4db1cf9c77781aaa', picture: 'http://placehold.it/32x32', name: 'Graciela Mcmahon', guid: '98c0fcc2-1dfc-4974-bdae-d8263d783e0a', star: '<mat-icon>star</mat-icon><ma
{
_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>',
}
{
_id:'5dd0d0dc4db1cf9c77781aaa',
图片:'http://placehold.it/32x32',
姓名:'Graciela Mcmahon',
guid:'98c0fcc2-1dfc-4974-bdae-d8263d783e0a',
明星:
“星空半星空边界星空边界”,
}
当我渲染开始时,它没有按预期渲染
我的组件代码
<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>
这是正确的显示方式还是我必须在角度组件内生成标记
预期结果
问题
您的问题源于您试图在运行时动态加载组件这一事实。这在纯html中是不可能发生的
读取动态组件加载mat图标
不是html元素,因此浏览器不知道如何处理它,因此会出现这种奇怪的结果
在应用程序中加载html也是一种非常糟糕的安全做法,它来自api,因为恶意代码和html可能被注入
解决方案
从后端以数字形式发送星星。创建一个定义了mat图标的ngFor,并根据您想要创建星星的次数进行迭代
<div class="cat_star">
<ng-container *ngFor="let star of listing.star">
<mat-icon>{{ star }}</mat-icon>
</ng-container>
</div>
{{star}}
你说它没有按预期呈现,但没有任何地方表明你的预期……我编辑了我的问题@roddyoffrozenpeasno,你不能这样做。不要在JSON中添加有角度的HTML标记。输入数据。在这种情况下,显示的星星数。在您的组件模板中,输入显示星星数所需的代码。