你如何在打字稿角度中显示字符串中的ul和li？

Question

我想要p class="卡片文本">｛｛skie.extendedDescription｝｝/p>在skie.component.html中显示列表以及ski-equipment.ts 中的正常字符串

skie.component.html

<div class="card-deck" *ngIf="skie">
<div class="card">
<img class="card-img-top" [src]="skie.imageUrl">
<div class="card-body">
<h2 class="card-title">{{skie.header}}</h2>
<p class="card-text">{{skie.description}}</p>
<p class="card-text">{{skie.extendedDescription}}</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
</div>
</div>

滑雪设备.ts

export const skiEquipmentsData = [
{
id: 1,
header: "Nybörjarpaketet",
description: "Detta är ett perfekt paket för dig som inte är så van vid att åka, men ändå vill få ut det mesta möjliga av din tid i backen",
extendedDescription: "Paket består av:<p><ul><li>Skida: Atomic Performer FB</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Nordica Trend LX 20/21</li></p>",
imageUrl: "/assets/images/beginner.png"
},
{
id: 2,
header: "Medelpaketet",
description: "Om du har åkt en del och vill ha en lite mer avancerad utrustning ska du välja detta paket. Här får du den bästa kompromissen mellan lättåkta skidor och bra prestanda.",
extendedDescription: "Paket består av:<p><ul><li>Skida: Atomic Redster WT</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Atomic Hawx Magna 100 21/22</li></p>",
imageUrl: "/assets/images/medium.png"
},
{
id: 3,
header: "Expertpaketet",
description: "När du vill ha det bästa som går att få för att känna att din skidåkning kan nå nya höjder är detta paketet för dig. Med denna topputrustning garanterar vi att du kommer att få en riktigt minnesvärd tid i backarna.",
extendedDescription: "Paket består av:<p><ul><li>Skida: Rossignol BlackOps Stargazer (Open) 21/22</li><li>Bindning: Touring Bindings Marker Alpinist 10 21/22</li><li>Pjäxa: Rossignol Alltrack Elite 90 GW (98 mm) 21/22</li></p>",
imageUrl: "/assets/images/expert.png"
}
];

查看图像以查看其在浏览器中的显示方式
图像

Answer 1

您可以在标记元素上使用属性innerHTML，以便在变量中嵌入HTML的解释

[innerHTML]="yourVariable"

https://angular.io/guide/property binding#绑定目标

<div class="card-deck" *ngIf="skie">
<div class="card">
<img class="card-img-top" [src]="skie.imageUrl">
<div class="card-body">
<h2 class="card-title" [innerHTML]="skie.header"></h2>
<p class="card-text" [innerHTML]="skie.description"></p>
<p class="card-text" [innerHTML]="skie.extendedDescription"></p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
</div>
</div>