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

我正在尝试使用自定义管道来获取int值，然后根据该int返回材质设计图标。Angular 2 - 管道值和返回DOM元素

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; 
    } 
}

然而，当页面加载其仅示出了[对象的HTMLElement]代替在返回列出的实际HTML元素。

来源

2016-08-22 Tekk_Know

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

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

您可能需要做一些消毒。也In RC.1 some styles can't be added using binding syntax

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

看到

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

可能会奏效，但你必须使用一个不同的管道为text-xxx属性。

来源

2016-08-22 18:06:22

这似乎很接近，但MD图标似乎没有正确响应。它不是显示图标，而是简单地显示字符文本。 –

如果MD图标是Angular组件或指令，这是行不通的（我自己并没有使用Angular2材质）在这种情况下，您需要创建动态组件，如http://stackoverflow.com/questions/36325212/angular -2-dynamic-tabs-with-user-click-chosen-components/36325468＃36325468 –

把它和outerHTML属性绑定在一起，谢谢你像平常一样。 –

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

回答

相关问题