浏览器不解析由角度管道返回的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>在我的网页渲染。

我在做什么错？

答

我怀疑你应该使用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属性，所以它将显示为字符串。

上使用它了！谢谢。 – gh0st

解释为什么我需要使用'[innerHtml]'的奖励点？ – gh0st

答

你为什么不使用*ngFor？您已经在tr

所以上面的答案回答了我的问题。但我也可以走这条路。我只是寻找一种干净的方式来尽可能使用尽可能少的代码。 – gh0st

浏览器不解析由角度管道返回的html标记

相关推荐