首页 > 解决方案 > 带有条件的 li 标记在不满足条件时创建空格

问题描述

我正在开发一个角度应用程序。我正在尝试创建一个列表并在我的<li>标签中有一个检查条件。当条件不满足时,我不想创建项目。我的代码

<ul>
    <li [style.visibility]="data.First == 'Y' ? 'visible' : 'hidden'">
        <span>
            First Item
        </span>
    </li>
    <li  [style.visibility]="data.Second == 'Y' ? 'visible' : 'hidden'">
        <span>
            Second Item
        </span>
    </li>
</ul>

当条件不满足时,项目不会添加到列表中,但会为该行创建空白空间。如何避免创建空行?我也试过 *ngIf 但这没有帮助。

标签: htmlangularhtml-listsangular-ng-if

解决方案


可见性如何避免空行尝试

<li  [style.display]="data.Second == 'Y' ? 'block' : 'none'">

推荐阅读