Angular 2根据管道结果添加样式答案

【问题标题】：Angular 2 add style based on pipe resultAngular 2根据管道结果添加样式
【发布时间】：2017-07-31 08:23:03
【问题描述】：

我不确定，如果这是可能的。

<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，我想显示一个样式，如果不是，则不显示该样式。但是我可以通过*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;
    }

如果提供的信息不充分或不清楚，请告诉我。

【问题讨论】：

标签： angular

【解决方案1】：

可以使用前阵子介绍的as

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

然后在其他指令或绑定中使用它

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

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

【讨论】：

谢谢。你忘了在[ngStyle] 中添加} [ngStyle]="{backgroundColor: result >= 5 ? 'red' : 'blue'}
感谢您的提示 :) - 已修复。
谢谢。我仍然得到相同的行为。 ngif 运行一次后，unreadConversations 更改后将不再运行。
尝试将[unreadConversations,partner.id] 更改为unreadConversations: partner.id 和transform(value: any, ...args: any[]): any { 更改为transform(value: any, unreadConversations:any, partnerId:any): any {。
我不得不从*ngIf中删除条件