javascript - 如何在 Angular2 中实现 'category filter'

Question

场景

在 Angular2 应用程序中，我在组件 View 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/

问题

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

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

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

谢谢

Answer 1

这可以通过创建一个新变量来实现，一个表示过滤项目的数组并使用 *ngFor与那些过滤的项目。你会使用 Array.prototype.filter连同 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和/或默认为空数组 []避免尝试对 undefined/null 执行数组操作。

此外，建议避免使用 <a>元素作为按钮，而只是使用 <button>元素。此外，如评论中所述，angular team recommends NOT using pipes for filtering and/or sorting ，所以我会避免按照您链接的文章建议去做。