场景

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/

问题

我的问题是，是否有人知道我正在尝试做的任何好的示例，或者有人可以建议从这里开始的好地方吗？

我可以想到的一个选择是在与类别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和/或默认为空数组[]，以避免尝试对未定义/空值执行数组操作。

此外，建议避免使用<a>元素作为按钮，而应仅使用<button>元素。另外，正如评论中提到的angular team recommends NOT using pipes for filtering and/or sorting，所以我避免做您链接的文章所建议的事情。

希望有帮助！

如何在Angular2中实现“类别过滤器”

场景

要求

类似示例

问题

1 个答案: