时间戳

首页 > 解决方案 > Angular 反应形式和隐藏元素

angular - Angular 反应形式和隐藏元素

问题描述

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

下面是我的 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 是否为空，如果是，请不要显示侧边栏并制作网格 col-md-12，因为没有栏我们不需要处理折叠。如果 filterConfigId 不为空，我们会正常显示。实现这一目标的最佳方法是什么？

标签： angular

解决方案

您的代码很好，我只建议在侧边栏上添加 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'}}" >

推荐阅读