带有条件的li标记在不满足条件时创建空格

Question

我正在开发一个角度应用程序。我正在尝试创建一个列表，并在我的<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，但没有帮助。

Answer 1

可见性如何避免空行试试

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

Answer 2

您可以使用*ngIf来实现这一点。检查以下代码。如果条件结果为true angular，则创建或添加项目(<li>元素(，否则跳过该元素。

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

Answer 3

如果你想输出一个长度为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>