带有条件的li标签在不满足条件时会创建空白

如何解决带有条件的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，但这没有帮助。

解决方法

visibility如何避免空行尝试

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

,

您可以使用*ngIf来实现。检查以下代码。 如果您的条件结果是正确的，则创建或添加一个item（<li>元素），否则跳过该元素。

<ul>
    <li *ngIf="data.First == 'Y'">
        <span>
            First Item
        </span>
    </li>
    <li  *ngIf="data.Second == 'Y'">
        <span>
            Second Item
        </span>
    </li>
</ul>

,

如果要输出长度为n的列表，我建议使用类似的方法：

[AllowAnonymous]