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基于管道结果添加样式

回答

相关问题