角度 2 - 过滤管返回空答案

【问题标题】：angular 2 - filter pipe return empty角度 2 - 过滤管返回空
【发布时间】：2017-07-31 04:48:50
【问题描述】：

我正在尝试使用过滤器管道过滤我的数据，但它返回一个空页面。如果我删除 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;
      }
   }

  }

}

【问题讨论】：

发布管道的完整代码
对不起，这是我到目前为止所尝试的。无法真正理解网上提供的示例，因为大多数都与搜索功能相关
请尝试 console.log(value);在您的过滤器类中，我确定您在搜索中发送了一个静态字符串“名称”

标签： angular typescript angular2-pipe

【解决方案1】：

如果你写

listArray.indexOf("value")

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

我认为你的意思是

listArray.indexOf(value)

【讨论】：

【解决方案2】：

首先你的管道应该有一个名字，你应该使用 value 而不是 '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;
    }
}
}
}

【讨论】：

【解决方案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)
    }
  ];

【讨论】：