Angular 2 - 管道值并返回 DOM 元素

Question

我正在尝试使用自定义管道接收一个 int 值，然后 return 一个基于该 int 的 material 设计图标。

HTML:

{{item.MetGoal | NumberToStatusSymbol}}

TypeScript/JS:

transform(value, args?) {
    switch (value){
        case '0':
            return $.parseHTML(`<i class="material-icons text-red">&#xE5C9;</i>;`);
        case '1':
            return $.parseHTML(`<i class="material-icons text-green">&#xE86C;</i>`);
        case '2':
            return $.parseHTML(`<i class="material-icons text-yellow">&#xE8B2;</i>`);
        default: break;
    }
}

然而，当页面加载时，它只显示 [object HTMLElement] 而不是 return 中列出的实际 HTML 元素。

Answer 1

<div [outerHTML]="item.MetGoal | NumberToStatusSymbol"

{{}} 进行字符串插值并将结果添加为字符串。这似乎不是你想要的。

您可能需要进行一些消毒。另见

case '0':
  return &#xE5C9;
...

和

<i class="material-icons">{{item.MetGoal | NumberToStatusSymbol}}</i>

可能有效，但是您必须为 text-xxx 属性使用不同的管道。

Angular 2 - 管道值并返回 DOM 元素

Angular 2 - Piping value and returning DOM element

angular2-pipe

angular