瀏覽器不解析由角度管道返回的html標記

我想要發生的是爲管道提供值，並讓管道將其變爲列表。這可能不是解決這個問題的最好方法，但這是首先想到的。瀏覽器不解析由角度管道返回的html標記

基本上我有一個簡單的表。我有我的模板

<tr *ngFor="let res of results"> 
    <td>{{res.value1}}</td> 
    <td>{{res.value2 | list}}</td> 
</tr>

我的list管是這樣的。

從'@ angular/core'導入{Pipe，PipeTransform};

@Pipe({ 
    name: 'list' 
}) 
export class ListPipe implements PipeTransform { 
    transform(value: string, args?: any): any { 
     let newList: string[]; 
     newList = value.split(','); 
     let output = '&lt;ul&gt;'; 
     newList.forEach(val => { 
      output += `&lt;li&gt;${val}&lt;/li&gt;`; 
     }); 
     output += '&lt;/ul&gt;'; 
     return output; 
    } 
}

我預期的結果會是這樣的

<tr> 
    <td>value 1</td> 
    <td> 
     <ul><li>value2.a</li><li>value2.b</li></ul> 
    </td> 
</tr>

但發生的事情是文字值<ul><li>value2.a</li><li>value2.b</li></ul>在我的網頁渲染。

我在做什麼錯？

來源

2017-10-13 gh0st

我懷疑你應該使用innerHTML屬性來顯示它：

<td [innerHTML]="res.value2 | list"></td>

，改變你的管道，如：

let output = '<ul>'; 
newList.forEach(val => { 
    output += `<li>${val}</li>`; 
}); 
output += '</ul>';

Stackblitz Example

插值<td>{{res.value2 | list}}</td>不會因爲工作angular創建文本節點並更新其nodeValue屬性，所以它將顯示爲字符串。

來源

2017-10-13 18:19:46 yurzui

上使用它了！謝謝。 – gh0st

解釋爲什麼我需要使用'[innerHtml]'的獎勵點？ – gh0st

你爲什麼不使用*ngFor？您已經在tr

來源

2017-10-14 02:41:48 Christian

所以上面的答案回答了我的問題。但我也可以走這條路。我只是尋找一種乾淨的方式來儘可能使用盡可能少的代碼。 – gh0st

瀏覽器不解析由角度管道返回的html標記

回答

相關問題