离子卡中的字母过滤器

Question

我正在为自己制作一个项目，我想制作一个字母过滤器。每当我生成离子卡时，我希望它由名字过滤。像安德烈，安伯，贝克等... 这就是我目前所拥有的：https://gyazo.com/07f8a2ed6af146634aac6a0edf1c24d2。

正如您所看到的，没有过滤器正常工作。

HTML

<ion-header>
  <ion-navbar color ="primary">

    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ appName }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<ion-searchbar></ion-searchbar>
  <ion-grid>
    <ion-row>
      <ion-col col-md-3 col-lg-2  col-xs-6 *ngFor="let item of items">
          <ion-card class="kaart">
          <ion-card-content>
            <ion-avatar item-left>
            <img class="pic" [src]="item.avatar" />
          </ion-avatar>
           <h2>{{item.voornaam}}</h2>
           <h2>{{item.achternaam}}</h2>
           <p>{{item.groep}}</p>
           <ion-icon color ="primary" class="call" name="call"></ion-icon>
           <ion-icon color ="primary" class="chatboxes" name="chatboxes"></ion-icon>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

TS

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})

export class Page1 {
appName = 'Schoolpoort';
items:any;

    constructor(private navCtrl: NavController) {

      this.items = [
      {voornaam: 'Mert', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Ask Sana', achternaam: 'Benzer', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Koray', achternaam: 'Avci', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Recep', achternaam: 'Ivedik', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Gel', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Yarim', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Gonlume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Huzur', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Ver', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Omrume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Soylesin', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Tum', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Sarkilar', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Mustafa', achternaam: 'Ceceli', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Real', achternaam: 'Madrid', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Is', achternaam: 'Kampioen', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Ruud van', achternaam: 'Nistelrooy', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Dennis', achternaam: 'Bergkamp', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Emre', achternaam: 'Mor', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Irem', achternaam: 'Derici', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'qwertyuioplk', achternaam: 'qwertyuioplk', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Cristiano', achternaam: 'Ronaldo', avatar: 'http://placehold.it/100', groep: 'Groep 1'}
      ]
}
}

Answer 1

要根据名称对项目进行排序，您可以按如下方式编写自定义排序功能：

this.items = this.items.sort(function(a,b) {return (a.voornaam < b.voornaam) ? -1 : (a.voornaam > b.voornaam) ? 1 : 0 ;});

将输出为：

{voornaam: "Ask Sana", achternaam: "Benzer", avatar: "http://placehold.it/100", groep: "Groep 1"}
{voornaam: "Cristiano", achternaam: "Ronaldo", avatar: "http://placehold.it/100", groep: "Groep 1"}
{voornaam: "Dennis", achternaam: "Bergkamp", avatar: "http://placehold.it/100", groep: "Groep 4"}
{voornaam: "Emre", achternaam: "Mor", avatar: "http://placehold.it/100", groep: "Groep 4"}
{voornaam: "Gel", achternaam: "Sezen", avatar: "http://placehold.it/100", groep: "Groep 2"}
...
{voornaam: "Ver", achternaam: "Sezen", avatar: "http://placehold.it/100", groep: "Groep 2"}
{voornaam: "Yarim", achternaam: "Sezen", avatar: "http://placehold.it/100", groep: "Groep 3"}
{voornaam: "qwertyuioplk", achternaam: "qwertyuioplk", avatar: "http://placehold.it/100", groep: "Groep 2"}

假设您希望按属性voornaam排序，如果没有，那么您可以根据需要更改compactor属性。