Question

我的Angular App中有一个页面，其中显示一个网格，在某些情况下，网格的左侧可能还会有一个过滤器栏。过滤器的数据来自数据库。我们将网格ID传递给filterbar代码，然后该代码检索所有项目并构建过滤器列表。一切正常，除了当网格没有过滤器时，它仍然显示该条，但其为空。

当前下面是我的filterSidebar的模板代码，该模板可处理它是否折叠

<!-- SideBar-->
    <div class="{{filtersSidebarContainer.isSidebarCollapsed ? '' : 'col-md-2 pr-md-0'}}">

这是页面我网格部分的代码

<!-- GRID -->
    <div class="{{filtersSidebarContainer.isSidebarCollapsed ? 'col-md-12' : 'col-md-10 pl-md-0'}}" *ngIf="isGridLoaded">

我想做的是先检查filterConfigId是否为null，如果不这样做，请不要显示补充工具栏并使Grid col-md-12，因为没有酒吧，我们不需要处理塌陷。如果filterConfigId不为null，则显示正常。实现此目标的最佳方法是什么？

Answer 1

您的代码很好，我只建议在边栏上添加ngIf并在其上使用ngClass。

如果为false，则ngIf根本不会渲染侧边栏，因此您可以获得一些性能

<!-- SideBar-->
<div *ngIf="filterConfigId" [ngClass]="{'col-md-2 pr-md-0': !filtersSidebarContainer.isSidebarCollapsed}"


<!-- GRID -->
<div *ngIf="isGridLoaded" class="{{filtersSidebarContainer.isSidebarCollapsed ? 'col-md-12' : 'col-md-10 pl-md-0'}}" >

我没有更改网格的任何内容，因为这样已经很好... 如果您在上面添加了filterConfigId的条件，则由于isSidebarCollapsed已经完成了这项工作，因此可能会降低性能。

编辑

<!-- GRID -->
<div *ngIf="isGridLoaded" class="{{!filterConfigId || filtersSidebarContainer.isSidebarCollapsed ? 'col-md-12' : 'col-md-10 pl-md-0'}}" >

角反应形式和隐藏元素

1 个答案: