如何從模板的方法返回的引號中刪除引號？

Question

我有一個這樣的模型。

export class Card {
    face: string;
    ....

    public getFaceCSS() {
        switch (this.face) {
        case 'H': return "♥";
        case 'D': return '♦';
        case 'C': return '♣';
        case 'S': return '♠';
        default: return '';
    }        
}    

當我嘗試在模板中打印出來時，我的輸出得到雙引號。

<span class="suit">{{card.getFaceCSS()}}</span>
<span class="suit">"&spades;"</span>

如何刪除它們？

Answer 1

采用 {！！ ！！} 代替 {{}}

<span class="suit">{!! card.getFaceCSS() !!}</span>

{{$ something}}在轉義后回顯$ something，即它將html和css轉換為字符串

{!! $ something !!}回顯$ something 而沒有轉義

Answer 2

將faceCss綁定到[innerHtml]屬性。 請參閱以下示例：

 <span class="suit" [innerHTML]="card.getFaceCSS()"></span> 

Answer 3

這可以通過綁定解決。

<span class="suit" [innerHTML]="card.getFaceCSS()"></span>

抱歉。