html - 浏览器不解析 Angular 管道返回的 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属性，因此它将显示为字符串。