Question

如何重写现有代码以显示我，当我登陆某个页面时，从db中检索到的所有数据，当我输入一些值来管道或过滤该数据时，只显示我输入的内容？ / p>

<div class="form-group">
    <input type="text" class="form-control" placeholder="Number of beds" [(ngModel)]="num_of_beds" ng-minlength="1">
</div>
<table class="table">
  <thead>
    <tr>
      <th>Room name</th>
      <th>Number of beds</th>
      <th>TV</th>
    </tr>
  </thead>
  <tbody>

        <tr  *ngFor="let room of rooms | SearchPipe:num_of_beds ">

            <td>{{room.roomname}}</td>
            <td>{{room.beds}}</td>
            <td>
                <span *ngIf="room.tv == '1'">
                TV: Yes
                 </span>
            <span *ngIf="room.tv != '1'">
                    TV: No
            </span>
        </td>
        </tr>
  </tbody>

</table>

这是管道:)

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

@Pipe({
  name: 'SearchPipe'
})
export class SearchPipe implements PipeTransform {

  transform (value, [queryString]) {

        if (value == null) {
            return null;
        }
        console.log('transform');
        return value.filter(item=>item.beds.indexOf(queryString) !== -1);


    }

}

如此低调地如何在我进入页面时显示从db中检索的整个数据，并仅在我通过该字段提交的内容时进行过滤

Answer 1

你应该这样做，检查args的值，即querystring如果它不存在返回值而没有过滤

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

@Pipe({
  name: 'SearchPipe'
})
export class SearchPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(!args)
     return value;
    return value.filter(item=>item.beds.indexOf(args) !== -1);
  }
}

类似的一些：Working Demo

如何在未插入值时显示没有自定义管道过滤的整个表

1 个答案: