Question

我有一个简单的离子列表和一个过滤器来显示与某个键匹配的项：值;我不知道我是否采取了正确的方式，如果有更好的方式请告诉我。

LIST.HTML

<ion-content class="listPage">
    <button ion-item [ngClass]="{active: type =='all'}" (click)="filter('all')">all</button>
    <button ion-item [ngClass]="{active: type =='red'}" (click)="filter('red')">red</button>
    <button ion-item [ngClass]="{active: type =='blue'}" (click)="filter('blue')">blue</button>

    <ion-list class="task-list">
        <button ion-item class="task-item" *ngFor="#item of list" [hidden]="isFilter(item.type)">
            <h2>{{item.title}}</h2>
            <p>{{item.type}}</p>
        </button>
    </ion-list>
</ion-content>

LIST.JS

export class ListPage {
   static get parameters() {
     return [[NavController]];
   }

   constructor(nav) {
     this.nav = nav;
     this.typeFilter = 'all';

     this.list = [
        {
            "title": "Anastasia T. Benton",
            "type": "red"
        },
        {
            "title": "Adena C. English",
            "type": "blue"
        },
     ]
   }



    filter(itemFilter) {
        this.typeFilter = itemFilter;
    }

    isFilter(itemType) {
        if (this.typeFilter == 'all') {
            return false;
        } else {
            return itemType != this.typeFilter;
        }
    }

}

到目前为止它工作得很好，当我点击相应的按钮时，它会显示正确的列表项。

现在我想把这个“过滤器”放在app.js上的侧边菜单上，但是这个功能不起作用，我不知道如何修复它。

LIST.HTML

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>List</ion-title>
</ion-navbar>

<ion-content class="listPage">
    <ion-list class="task-list">

        <button ion-item class="task-item" *ngFor="#item of list" [hidden]="isFilter(item.type)">
            <h2>{{item.title}}</h2>
            <p>{{item.type}}</p>
        </button>

    </ion-list>
</ion-content>

APP.HTML

<ion-menu [content]="content">

  <ion-toolbar>
    <ion-title>List Filter</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
        <button ion-item [ngClass]="{active: type =='all'}" (click)="filter('all')">all</button>
        <button ion-item [ngClass]="{active: type =='red'}" (click)="filter('red')">red</button>
        <button ion-item [ngClass]="{active: type =='blue'}" (click)="filter('blue')">blue</button>
        <button ion-item [ngClass]="{active: type =='orange'}" (click)="filter('orange')">orange</button>
        <button ion-item [ngClass]="{active: type =='greene'}" (click)="filter('greene')">green</button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

APP.JS

//i know i need to do something here. about dependencies, but i can't figure out how :/

此外，我想在过滤器的结果为空列表时显示某些内容（可以是a）。

本周我开始学习Ionic 2和Angular 2，我正在努力学习。到目前为止，我对Angular的唯一了解，我是从CodeSchool的“Shaping up with Angular.js”中学到的我已经了解了很多关于html5，scss，jQuery和javascript的一些基础知识。到目前为止我还不知道打字稿。

很抱歉没有实例，但我不知道如何用角度来构建一个。否则我会这样做。

感谢您的帮助。

Answer 1

您要做的是将列表数据管理移至服务。（您可以使用ionic g provider service-name生成空服务）

您的服务必须如下所示：

import {Injectable} from 'angular2/core';
import 'rxjs/add/operator/map';    

  @Injectable()
  export class ListService {       

 constructor() {
 this.typeFilter = 'all';
     this.list = [
        {
            "title": "Anastasia T. Benton",
            "type": "red"
        },
        {
            "title": "Adena C. English",
            "type": "blue"
        },
     ]
   } 

    filter(itemFilter) {
        this.typeFilter = itemFilter;
    }

    isFilter(itemType) {
        if (this.typeFilter == 'all') {
            return false;
        } else {
            return itemType != this.typeFilter;
        }
    }
}

在@App中，您将在providers数组中注入此服务：

import {ListService} from './providers/list-service/list-service'


@App({
  templateUrl: 'build/app.html',
  providers: [ListService] ,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {

constructor( public listService: ListService ) {

...

现在您可以在应用模板中使用listService，例如：

 <button ion-item [ngClass]="{active: type =='all'}" (click)="listService.filter('all')">all</button>

要在List @Page中使用此服务，您必须以不同的方式注入它;不要在providers数组中声明它;而只是在构造函数上执行：

export class ListPage {
   static get parameters() {
     return [[NavController, ListService]];
   }

   constructor(nav, listService) { ... }

现在您已准备好在List模板中引用listService，例如：

<button ion-item class="task-item" *ngFor="#item of listService.list" [hidden]="listService.isFilter(item.type)">

同样，请确保不将ListService添加到ListPage中的providers数组;这将创建服务的第二个实例，因此您将拥有两组不同的数据（一个用于应用程序，一个用于页面）。

Angular 2 + ionic 2：过滤函数依赖于* ngFor在其他页面上

1 个答案: