각도 2 - 파이핑 값과 DOM 요소 반환

사용자 정의 파이프를 사용하여 int 값을 가져 와서 해당 int를 기반으로 한 재질 디자인 아이콘을 반환하려고합니다.각도 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"

{{}} 문자열 보간을 수행하고 결과를 문자열로 추가합니다. 이것은 당신이 원하는 것 같지 않습니다.

일부 위생 처리가 필요할 수 있습니다. 작동 할 수

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

으로도 In RC.1 some styles can't be added using binding syntax

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

볼 수 있지만, 당신은 text-xxx 속성에 대한 서로 다른 파이프를 사용해야합니다.

출처

2016-08-22 18:06:22

MD 아이콘이 제대로 반응하지 않는 것처럼 보입니다. 아이콘을 표시하는 대신 단순히 문자 텍스트를 사용합니다. –

MD 아이콘이 각도 구성 요소이거나 지시문 인 경우 작동하지 않습니다 (본인은 Angular2 재질을 사용하지 않았습니다).이 경우 http://stackoverflow.com/questions/36325212/angular와 같이 동적 구성 요소를 만들어야합니다 -2-dynamic-tabs-with-user-click-selected-components/36325468 # 36325468 –

평소 Gunter처럼 outerHTML 속성 바인딩으로 가져 왔습니다. –

각도 2 - 파이핑 값과 DOM 요소 반환

답변

관련 문제