如何在 Angular2 中实现 'category filter'

Question

场景

在 Angular2 应用程序中，我在组件视图 parent.component.html 中有一些代码循环遍历 items 数组并将每个 item 作为新组件输出:

<div class="list-items">
  <!-- In the attached image, this is displayed as a coloured card -->
  <app-item *ngFor="let item of items" [item]="item"></app-list-slide>
</div>

每个item都有一个category键，它是一个id数组（对应于单独列表中每个类别的id）。

// Item JSON
[
  { 
    "id": 1,
    "imageUrl": "https://via.placeholder.com/300x150/FF0000/FFFFFF?text=1",
    "title": "One",
    "categories": [ 1 ]
  }
]

// Category JSON
[
  { "id": 1, "title": "Red Cards" },
  { "id": 2, "title": "Blue Cards" }
]

要求

应用程序需要有一个由类别动态生成的过滤器（我可能会把它做成一个单独的组件）：

<div class="items-filter">
  <!-- In the attached image, this is displayed as a list of category buttons -->
  <div *ngFor="let category of categories">
    <a (click)="filterItemsByCategory(category)">{{ category.title }}</a>
  </div>
  <div class="btn-o">Reset</div>
</div>

单击类别项目时，应仅显示与该类别对应的项目。理想情况下，可以单击多个类别，但可以稍后再单击。

我能找到的所有过滤器示例，似乎都使用基于文本输入的过滤，我不确定从哪里开始。

最终产品应如下所示：

类似示例

这是一个与我正在尝试做的非常相似的示例（但文本输入框将被类别按钮数组替换）：

文章： http://www.freakyjolly.com/angular-4-5-typescript-create-filter-list-with-check-boxes-to-select-from-list/

演示： https://freakyjolly.com/demo/AngularJS/Angular5FilterList/

问题

我的问题是，有没有人知道我正在尝试做的事情的任何好的工作示例，或者有人可以建议一个好的起点吗？

我能想到的一个选择是在对应于类别 ID 的组件上创建类 class="category-1 category-2" 但这看起来很乱。

另一种选择是使用 Masonary 或 Isotope 之类的东西，但是很多 Angular 这些库似乎已经过时了：https://github.com/search?q=angular+masonry

谢谢

Answer 1

这可以通过创建一个新变量来实现，该变量是一个表示过滤项目的数组，并将 *ngFor 与这些过滤项目一起使用。您将使用 Array.prototype.filter along with Array.prototype.includes 根据类别的 ID 是否包含在项目的 ID 值类别数组中来过滤项目：

组件：

import { Component } from "@angular/core";
import { Item } from "./item.ts";
import { Category } from "./category.ts";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  items: Item[] = [
    {
      id: 1,
      imageUrl: "https://via.placeholder.com/300x150/FF0000/FFFFFF?text=1",
      title: "One",
      categories: [1]
    }
  ];
  categories: Category[] = [
    { id: 1, title: "Red Cards" },
    { id: 2, title: "Blue Cards" }
  ];
  // Create a shallow copy of the items array
  filteredItems: Item[] = [...this.items];

  filterItemsByCategory(category: Category) {
    this.filteredItems = this.items.filter((item: Item) => {
      return item.categories.includes(category.id);
    })
  }

  reset() {
    this.filteredItems = [...this.items];
  }
}

模板：

<div class="items-filter">
    <!-- In the attached image, this is displayed as a list of category buttons -->
    <div *ngFor="let category of categories">
        <button type="button" (click)="filterItemsByCategory(category)">{{ category.title }}</button>
    </div>
    <button type="button" (click)="reset()" class="btn-o">Reset</button>
</div>

<div class="list-items">
    <!-- In the attached image, this is displayed as a coloured card -->
    <app-item *ngFor="let item of filteredItems" [item]="item">
    </app-item>
</div>

这是 action 中的示例。如果你的日期是异步的，它很可能在你的实际应用程序中，你可以使用 *ngIf and/or 默认为空数组 [] 以避免尝试对 [=31= 执行数组操作].

此外，建议避免使用 <a> 元素作为按钮，而是仅使用 <button> 元素。另外，正如评论中提到的 angular team recommends NOT using pipes for filtering and/or sorting，所以我会避免按照您 link 建议的文章进行操作。

如何在 Angular2 中实现 'category filter'

How can I implement a 'category filter' in Angular2

javascript

jquery-isotope

masonry

angular

场景

要求

类似示例

问题