как показать всю таблицу без пользовательской фильтрации каналов, когда значение не вставлено - PullRequest
Новая
       34

как показать всю таблицу без пользовательской фильтрации каналов, когда значение не вставлено

0 голосов
/ 09 июня 2018

Как мне переписать свой существующий код, чтобы показать мне, когда я сажусь на определенную страницу, все данные, полученные из базы данных, и когда я ввожу какое-то значение в канал или для фильтрации этих данных, показывает мне только то, что я ввел? 

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


    }

}

Итак, как по-английски показать все данные, полученные из БД, когда я вхожу на страницу, и отфильтровать, только когда я что-то отправил черезполе

1 Ответ

0 голосов
/ 09 июня 2018

Вы должны сделать это следующим образом, проверьте значение аргументов, то есть строку запроса, если это не настоящее возвращаемое значение без фильтрации 

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

кое-что похожее: Рабочая демонстрация

...