Question

我有一个项目列表：

  items = [
    {id: '1', title: 'item 1'},
    {id: '2', title: 'item 2'},
  ]

我想在此列表中添加类别并根据该类别进行过滤，例如

-items
-- cat1
--- item 1
--- item 2
-- cat2
--- item 1
--- item 2
-- cat3
--- item 1
--- item 2

另外，我如何更改ngFor代码以选择cat

<ion-list>
  <ion-item *ngFor="let item of items" (click)="clicked($event, item)">
    <h2>{{item.title}}</h2>
  </ion-item>
</ion-list>



  clicked (event, item){
    console.log(item.title);
  }

Answer 1

如果您想添加类别，那么您的items数组将如下所示：

this.items = [
  { 
    id: 1, 
    title: 'Category 1', 
    items : [ 
              {id: 1, title: 'item 1'},
              {id: 2, title: 'item 2'} 
            ]
  },
  { 
    id: 2, 
    title: 'Category 2', 
    items : [ 
              {id: 3, title: 'item 3'},
              {id: 4, title: 'item 4'} 
            ]
  },
  { 
    id: 3, 
    title: 'Category 3', 
    items : [ 
              {id: 5, title: 'item 5'},
              {id: 6, title: 'item 6'} 
            ]
  }
];

您可以使用两个嵌套*ngFor来打印items数组，如下所示：

  <ion-list  no-lines>
    <ion-item *ngFor="let item of items" (click)="clicked($event, item)">
      Title: {{ item.title }} - Id: {{ item.id }}
      <p *ngFor="let subitem of item.items" no-lines>
        <span>Title: {{ subitem.title }} - Id: {{ subitem.id }}</span>
      </p>
    </ion-item>
  </ion-list>

请在此working plunker中找到完整的代码。

<强>更新

在打开页面时，我将如何过滤显示哪个类别？所以，我推送到商品页面，只想显示商品页面那个类别。

使用custom Pipe可以轻松实现这一目标。我已经更新了plunker，所以现在视图看起来像这样：

  <ion-list>
    <ion-item>
      <button (click)="showCategory(1)">Show Cat 1</button>
      <button (click)="showCategory(2)">Show Cat 2</button>
      <button (click)="showCategory(3)">Show Cat 3</button>
      <button (click)="showCategory(-1)">Show All</button>
    </ion-item>
  </ion-list>
  <ion-list  no-lines>
    <ion-item *ngFor="let item of (items | categoryFilter:selectedCategoryId)" (click)="clicked($event, item)" >
      Title: {{ item.title }} - Id: {{ item.id }}
      <p *ngFor="let subitem of item.items" no-lines>
        <span>Title: {{ subitem.title }} - Id: {{ subitem.id }}</span>
      </p>
    </ion-item>
  </ion-list>

第一个<ion-item></ion-item>中的按钮将允许我们选择要显示的类别（通过在打字稿代码private selectedCategoryId : number;中使用新属性，但所有魔法都由此行完成代码

*ngFor="let item of (items | categoryFilter:selectedCategoryId)"

我们使用自定义管道仅在循环中包含id与selectedCategoryId匹配的类别。您可以在CategoryFilter代码中看到：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'categoryFilter' })
export class CategoryFilter implements PipeTransform {
    transform(items: any[], selectedId: number): any {
        if(selectedId === -1)
          return items;
        return items.filter(item => item.id === selectedId);
    }
}

我不知道您想要完成什么，但如果您不想显示按钮，则可以在页面的selectedCategoryId中设置constructor 。同样，您可以在this plunker。

中找到该代码

离子2中数组列表中的两个级别的项目

1 个答案: