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

Question

我不确定这是否可能。

<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 和 Filter 来实现此目的，但如果 Filter 的值发生更改，则 *ngIf 不会更改。

例如。我的数组中有 2 个项目。

第 1 项:长度为 1，它显示跨度并完成其工作...

第 2 项:开始时长度为 0，并且不显示(这是正确的行为)，但过滤器值发生变化，但随后不会再次调用 *ngIf。

unreadConversationForPartner 管道

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

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

Answer 1

您可以使用不久前引入的as

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

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

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

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