Есть ли способ сделать определенные элементы в списке невидимыми с помощью angular * ngFor? - PullRequest
Новая
       10

Есть ли способ сделать определенные элементы в списке невидимыми с помощью angular * ngFor?

0 голосов
/ 31 октября 2019

Я создаю базовое веб-приложение для отслеживания запасов с помощью Angular, и у меня возникла проблема. Я хочу, чтобы на моей главной странице немедленно отображались самые последние данные инвентаризации. Приложение находится в зачаточном состоянии, поэтому данные инвентаризации поступают в него через фиктивный список инвентаря, как показано здесь: 

import { Inventory } from './inventory';

export const INVENTORY: Inventory[] = [
    { item: 'generic', type: 'sticker', count: 14 },
    { item: 'sonny', type: 'pti', count: 9 },
    { item: 'ribbon', type: 'pti', count: 4 },
    { item: 'sonny', type: 'box', count: 56 },
    { item: 'generic', type: 'box', count: 6 },
    { item: 'salad', type: 'box', count: 12 },
    { item: 'foam', type: 'other', count: 39 },
    { item: 'glue', type: 'other', count: 41 },
    { item: 'twine', type: 'other', count: 2 }
];

Список содержит атрибут типа, чтобы впоследствии можно было фильтровать его по типу.

Чтобы отобразить этот список, я использую HTML-код следующим образом: 

<ul class="inventory">
    <h3>Stickers</h3>
    <li *ngFor="let item of inventory">
        <a *ngIf="item.type === 'sticker'>
            <span class="badge">{{item.item}}</span> {{item.count}}
        </a>
    </li>
</ul>

Как видите, я создаю элемент списка и вызываю * ngFor = "let item of инвентарь"перебирать весь список. Далее * ngIf проверяет, является ли тип элемента «наклейка», и если это так, он записывает переменные item.item и item.count на дисплей. Span class = "badge" предназначен только для форматирования css.

Проблема в том, что при этом отображаются пустые атрибуты css для каждого элемента в списке и заполняются те, где type === 'sticker'. Я хочу отображать только те элементы, которые имеют тип = стикер, а остальные сделать невидимыми. Вы можете видеть, что я имею в виду на изображении ниже.

Веб-вывод, показывающий элементы списка в формате css для всех элементов и заполнение только элементов списка с типом === 'sticker'

Как я могу это сделать?

1 Ответ

0 голосов
/ 31 октября 2019

Чтобы решить эту проблему, используйте ниже CSS в component.css 

ul li{
  list-style: none
}

Пример рабочего ocde для справки - https://stackblitz.com/edit/angular-cql9hi?file=src/app/app.component.css

Опция 2: Использовать нгконтейнер и переместить * ngFor в ng-контейнер и * ngIf в элемент li 

<ul class="inventory">
    <h3>Stickers</h3>
    <ng-container *ngFor="let item of inventory">
    <li *ngIf="item.type === 'sticker'">
        <a>
            <span class="badge">{{item.item}}</span> {{item.count}}
        </a>
    </li>
    </ng-container>
</ul>

рабочий пример кода для справки - https://stackblitz.com/edit/angular-x4lzgc?file=src/app/app.component.html

ng-контейнер позволяетобернуть элементы как блок без создания нового элемента

Пожалуйста, обратитесь к этой ссылке для получения более подробной информации о ng-container - против

...