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

ページは、そののみ示す[オブジェクトのHTMLElement]の代わりに、リターンに記載されている実際のHTML要素をロードするが。

Answer 1

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

{{}}文字列補間を行い、結果を文字列として追加します。これはあなたが望むものではないようです。

サニタイズを行う必要があるかもしれません。働くかもしれない

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

でもIn RC.1 some styles can't be added using binding syntax

case '0': 
    return  
... 

参照してください、しかし、あなたはtext-xxx属性の異なるパイプを使用する必要があります。