angular 2 - 过滤管道 return 空

Question

我正在尝试使用过滤器管道来过滤我的数据，但它 returns 是一个空白页面。如果我删除 html 上的 | filter，就会显示数据。过滤器管道的工作方式与 name 存在时一样，它将显示所有名称。

第一次使用过滤管，有错误请指出

数据示例

[

    {
        "name": "Alien",
        "age": 18,
        "address": "lorem ipsum"

    },
    {
        "name": "Peter",
        "age": 17, 
       "address": "lorem ipsum"
    }
    {
        "name": "Ben",
        "age": 20, 
        "address": "lorem ipsum"
    }

]

html

  <ion-item *ngFor="let list of this.data | filter: 'name'">

  <h2>{{ list.name }}</h2>

  </ion-item>

过滤管

export class MyPipe implements PipeTransform {

transform(listArray: any, value: any): any {

if ( value === undefined )return listArray;

  for( let i= 0; i<listArray; i++){

 if (listArray.indexOf("value")){
 return value;
      }
   }

  }

}

Answer 1

如果你写

listArray.indexOf("value")

它将 return 包含该数组中的字符串 "value" 的项目。

我想你的意思是

listArray.indexOf(value)

Answer 2

首先你的管道应该有一个名字，你应该使用值而不是 'value'，它是一个字符串。

@Pipe({ name: 'filter' })
export class MyPipe implements PipeTransform {
transform(listArray: any, value: any): any {
if ( value === undefined )return listArray;
  for( let i= 0; i<listArray; i++){
   if (listArray.indexOf(value)){
   return value;
    }
}
}
}

Answer 3

我的解决方案：

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})

export class FilterPipe implements PipeTransform {

  /**
   * Value is an array of servers
   */
  transform(value: any, filterString: string, propName: string): any {
    if(value.length === 0) {
      return value;
    }

    const resultArray = [];

    // Loop through all my items in value array
    for(const item of value) {
      // Check if status of of each server matches the filter string
      if(item[propName] === filterString) {
        resultArray.push(item);
      }
    }
    return resultArray;
  }
}

app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <input type="text" [(ngModel)]="filteredStatus" class="form-control" placeholder="Filter status">
      <hr>
      <ul class="list-group">
        <li
          class="list-group-item"
          *ngFor="let server of servers | filter: filteredStatus: 'status'"
          [ngClass]="getStatusClasses(server)">
          <span
            class="badge">
            {{ server.status }}
          </span>
          <strong>{{ server.name | shorten: 15 }}</strong> |
          {{ server.instanceType | uppercase }} |
          {{ server.started | date:'fullDate' | uppercase }}
        </li>
      </ul>
    </div>
  </div>
</div>

app.component.ts

  filteredStatus = '';

  appStatus = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('stable');
    }, 2000);
  });

  servers = [
    {
      instanceType: 'medium',
      name: 'Production',
      status: 'stable',
      started: new Date(15, 1, 2017)
    },
    {
      instanceType: 'large',
      name: 'User Database',
      status: 'stable',
      started: new Date(15, 1, 2017)
    },
    {
      instanceType: 'small',
      name: 'Development Server',
      status: 'offline',
      started: new Date(15, 1, 2017)
    },
    {
      instanceType: 'small',
      name: 'Testing Environment Server',
      status: 'stable',
      started: new Date(15, 1, 2017)
    }
  ];

angular 2 - 过滤管道 return 空

angular 2 - filter pipe return empty

typescript

angular2-pipe

angular