浏览器不解析由角管返回的 html 标签

Question

我想要发生的是为管道提供一个值，并让管道将其转换为列表。这可能不是最好的方法，但这是我想到的第一件事。

基本上我有一个简单的表。我有我的模板

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

我的list烟斗就是这样。

从'@angular/core'导入{管道，管道转换}；

@Pipe({
    name: 'list'
})
export class ListPipe implements PipeTransform {
    transform(value: string, args?: any): any {
        let newList: string[];
        newList = value.split(',');
        let output = '<ul>';
        newList.forEach(val => {
            output += `<li>${val}</li>`;
        });
        output += '</ul>';
        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>在我的页面中呈现文字值。

我究竟做错了什么？

Answer 1

我怀疑您应该使用innerHTMLproperty 来显示它：

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

并更改您的管道，例如：

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

Stackblitz 示例

插值<td>{{res.value2 | list}}</td>不起作用，因为 angular 创建文本节点并更新其nodeValue属性，因此它将显示为字符串。