Html 带有条件的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，但没有任何帮助。

这是如何避免空行的，请尝试

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

您可以使用

*ngIf

实现这一点。检查下面的代码。 如果您的条件结果为true，则创建或添加项目（

元素），否则跳过该元素

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

第一项


第二项

如果要输出长度为n的列表，我建议如下：

<ul>
    <ng-container *ngFor="let entry of data; let index = index">
        <li *ngIf="entry.myParameter == 'Y'">
            <span>{{ index }} item</span>
        </li>
    </ng-container>
</ul>

{{index}}项