有没有办法用 angular *ngFor 使列表中的某些元素不可见？

Question

我正在使用 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 inventory" 来遍历整个列表。接下来 *ngIf 检查项目类型是否为 'sticker'，如果是，它将 item.item 和 item.count 变量写入显示。跨度 class="badge" 仅用于 css 格式化目的。

问题是，这会显示 列表中每个项目 的空白 css 属性，并填充类型 === 'sticker' 的那些.我只想显示 type = 'sticker' 的那些项目，并使其余项目不可见。你可以在下图中看到我的意思。

Web output showing css formatted list items for all items and populating only the elements of the list with type === 'sticker'

我该怎么做？

Answer 1

要解决此问题，请在 component.css

中使用以下 CSS

ul li{
  list-style: none
}

示例工作 ocde 以供参考- https://stackblitz.com/edit/angular-cql9hi?file=src/app/app.component.css

选项 2： 使用 ng 容器并将 *ngFor 移动到 ng-container 并将 *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-container 允许像块一样包装元素而不创建新元素

有关 ng-container 的更多详细信息，请参阅此 link -

有没有办法用 angular *ngFor 使列表中的某些元素不可见？

Is there a way to make certain elements in a list invisible with angular *ngFor?

html

angular

typescript

ngfor