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

Question

我有一个简单的离子列表和一个过滤器来显示与特定匹配的项目 key:value；不知道我做的对不对，如果有更好的方法请告诉我

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

}

到目前为止它运行良好，当我单击相应按钮时它会显示正确的列表项。

现在我想把这个 "filter" 放在 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 :/

我还想在过滤器的结果为空列表时显示一些内容（可以是）。

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

很抱歉没有实例，但我不知道如何使用 angular 构建实例。否则我会做。

感谢您的帮助。

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 中，您将在提供程序数组中注入此服务：

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>

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

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

   constructor(nav, listService) { ... }

现在您可以在列表模板中引用 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

Angular 2 + ionic 2 : filter function dependent from *ngFor on other page

dependencies

angularjs

angularjs-filter

ionic2

angular