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

Question

我想要做的是为管道提供一个值，然后让管道将它变成一个列表。这可能不是最好的解决方法，但这是我想到的第一件事。

基本上我有一张简单的桌子。我有我的模板

<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 = '<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

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

Answer 2

你为什么不直接使用*ngFor？你已经在tr上使用它了