Angular 离子卡中的字母过滤器

我正在为我自己做一个项目，我想做一个字母过滤器。每次我生成一张爱奥尼亚卡时，我都希望它按名字过滤。像安德烈，安珀，贝克等等。。。 这是我目前拥有的：

正如您所见，没有过滤器工作

HTML

---

要根据名称对项目进行排序，可以编写自定义排序函数，如下所示：

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

---

假设您想按属性排序

voornaam

如果不想，您可以随意更改压缩程序属性。

您想按升序排序吗？对不起，我不知道这是什么意思（糟糕的英语）。但我想要的是：第一个名字是安珀·鲁尼，另一个名字是鲍勃·约翰逊。第一张爱奥尼亚卡将是琥珀色的，第二张是鲍勃。A，b，c，d。只有名字。我希望我说的很清楚明白了，你想要这样的东西是的，你知道我如何在我的代码中实现它吗？：）当然，我会把答案贴出来

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

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