我希望 p >{{skie.extendedDescription}}/p> 在skie.component.html中顯示串列以及來自ski-equipments.ts的普通字串
sky.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"
}
];
查看影像以查看它在瀏覽器中的顯示方式
影像
uj5u.com熱心網友回復：
您可以在標簽元素上使用屬性 innerHTML 來解釋嵌入在變數中的 HTML
[innerHTML]="yourVariable"
https://angular.io/guide/property-binding#binding-targets
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/436031.html