Блог

Главная - Вопросы по программированию - тег li с условием, создающим пустые места, когда условие не выполняется

тег li с условием, создающим пустые места, когда условие не выполняется

#html #angular #html-lists #angular-ng-if

#HTML #угловой #html-списки #angular-ng-if

Вопрос:

Я работаю над приложением angular. Я пытаюсь создать список и проверить условие в своем <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, но это не помогло.

Ответ №1:

Вот как работает видимость, чтобы избежать попытки пустой строки

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

Ответ №2:

Вы можете добиться этого с помощью *ngIf . Проверьте приведенный ниже код. если результат вашего условия истинен, angular создает или добавляет элемент ( <li> элемент), в противном случае этот элемент пропущен.

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

Ответ №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>