Fatal编程技术网
  • angular/
  • Angular ionic 2中数组列表中的两级项

Angular ionic 2中数组列表中的两级项

angular typescript ionic2

Angular ionic 2中数组列表中的两级项,angular,typescript,ionic2,Angular,Typescript,Ionic2,我有一个项目数组列表： 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>

我有一个项目数组列表：

  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);
  }


{{item.title}
已单击（事件、项目）{
控制台日志（项目名称）；
}
如果要添加类别，则您的
项数组将如下所示：


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'} 
            ]
  }
];



  <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>



  <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>


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


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'} 
            ]
  }
];



  <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>



  <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>


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


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
。同样，您可以在中找到该代码。
如果您要添加类别，则您的
项
数组如下所示：


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'} 
            ]
  }
];



  <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>



  <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>


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


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'} 
            ]
  }
];



  <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>



  <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>


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


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
。同样，您可以在中找到该代码。
在打开页面时，如何筛选显示的类别？所以，我会推到项目页面，只想显示的项目只为类别1类别2抱歉，我没有解释好自己。我想让你在一个单独的页面上添加这些按钮，然后你单击它们，它会转到items页面，只显示用户单击的类别。在这种情况下，你可以使用
items
数组和类似
getItemsByCategory（categoryId:number）：any[]{…}的方法创建一个
服务
然后按下按钮时，只需将
类别ID
作为参数发送到
按钮中即可。然后在新页面的构造函数中，获取该参数并调用服务以获取项目。在这种情况下，您不需要
管道
。打开页面时，我将如何筛选显示的类别？所以，我会推到项目页面，只想显示的项目只为类别1类别2抱歉，我没有解释好自己。我想让你在一个单独的页面上添加这些按钮，然后你单击它们，它会转到items页面，只显示用户单击的类别。在这种情况下，你可以使用
items
数组和类似
getItemsByCategory（categoryId:number）：any[]{…}的方法创建一个
服务
然后按下按钮时，只需将
类别ID
作为参数发送到
按钮中即可。然后在新页面的构造函数中，获取该参数并调用服务以获取项目。在这种情况下，您不需要
管道
。