angular - Angular 2 - 管道值和返回 DOM 元素

Question

我正在尝试使用自定义管道来获取 int 值，然后返回基于该 int 的材料设计图标。

HTML：

{{item.MetGoal | NumberToStatusSymbol}}

打字稿/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] 而不是返回中列出的实际 HTML 元素。

Answer 1

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

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

您可能需要进行一些消毒。另见在 RC.1 中，某些样式无法使用绑定语法添加

case '0':
  return 
...

和

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

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