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

Question

如何重写我现有的代码，以便在我登陆某个页面时向我显示从数据库检索的所有数据，以及当我输入一些值以通过管道传输或过滤该数据时，只显示我输入的内容？

<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);


    }

}

所以基本上如何在我进入页面时显示从数据库检索的全部数据，以及仅当我通过字段提交内容时才进行过滤

Answer 1

你应该这样做，检查 args i.n. 的值。查询字符串，如果它不存在 return 没有过滤的值

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

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

how to show whole table without custom pipe filtering when value is not inserted

angular-ng-if

ngfor

angular