Angular 2基於管道結果添加樣式

我不確定，如果這是可能的。Angular 2基於管道結果添加樣式

<span class="nav-label second-level-text" style="margin-left: 10px;"> 
{{partner.name}} 
    <span class="badge" 
     *ngIf="unreadConversations.length > 0 | unreadConversationForPartner : [unreadConversations,partner.id]"> 
    {{unreadConversations.length | unreadConversationForPartner : [unreadConversations,partner.id]}} 
    </span> 
</span>

我有跨越在這裏。我正在對*ngIf應用過濾器，並且還顯示返回的過濾器的值（這是計數）

如果從管道返回的計數大於0，我想顯示樣式，如果不是， t顯示風格。不過，我可以通過*ngIf and Filter達到此目的，但如果Filter的值發生更改，則*ngIf不會發生更改。

例如，我有2個項目在數組中。

項目1：長度爲1，它顯示的跨度和它的工作...

項目2：在開始的長度爲0，並且不顯示（這是正確的行爲），但過濾器值更改，但不會再次調用*ngIf。

unreadConversationForPartner pipe

transform(value: any, ...args: any[]): any { 
     var count = 0; 
     var partnerId = args[0][1]; 
     var conversations = args[0][0]; 
     conversations.forEach(element => { 
      if(element.partnerId == partnerId) count++ 
     }); 
     return count; 
    }

讓我知道，如果提供的信息不夠或清除。

來源

2017-07-31 User1911

您可以使用引入了一會兒as其他指令或綁定

[ngStyle]="{backgroundColor: result >= 5 ? 'red' : 'blue'}"

參見https://angular.io/api/common/NgIf#storing-conditional-result-in-a-variable

來源

2017-07-31 08:26:50

由於前

*ngIf="unreadConversations.length > 0 | unreadConversationForPartner : [unreadConversations,partner.id] as result"

，然後使用它。你忘了在'[ngStyle]''[ngStyle] =「{backgroundColor：result> = 5？'red'：'blue'}'' – User1911

感謝提示:) - fixed。 –

謝謝。在'ngif'運行一次之後，'unreadConversations'改變後它不會再運行。 – User1911

Angular 2基於管道結果添加樣式

回答

相關問題