Angular - фильтрация таблицы по трубе - PullRequest
Новая
       4

Angular - фильтрация таблицы по трубе

1 голос
/ 16 апреля 2020

Я новичок в angular и пытаюсь создать свою первую программу с полным стеком, я использую angular и весеннюю загрузку. Что я пытаюсь сделать, чтобы получить файлы с моего сервера и отобразить их в таблице, используя angular. Мне удалось это сделать, но теперь я хочу добавить опцию Filltering на стол, и я использовал трубы, чтобы сделать это, но это, похоже, не сработает, трюк, который я имею, находится в части html на my 

*ngFor="let file of files | async ; let i = index ">

Не могу найти способ написать все условия без ошибки

Вот мой код на стороне клиента: html part: 

<div class="panel panel-default">
<div class="panel-heading">
    <h1>Files</h1>
</div>
<div class="panel-body">

    <form>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">
              <i class="glyphicon glyphicon-search"></i>
            </div>
            <input
              type="text"
              class="form-control"
              name="searchString"
              placeholder="Type to search..."
              [(ngModel)]="searchString"
            />
          </div>
        </div>
      </form>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th>Location</th>
                <th>Timestamp</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let file of files | async ; let i = index ">
                <th scope="row">{{ i + 1 }}</th>
                <td>{{file.location}}</td>
                <td>{{file.timestamp}}</td>
                <td>{{file.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

и канал: 

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

@Pipe({
 name: 'filter'
 })
 @Injectable()
 export class SearchPipe implements PipeTransform {
 transform(items: any[], field: string, value: string): any[] {
  if (!items) {
  return [];
    }
   if (!field || !value) {
    return items;
  }

return items.filter(singleItem =>
  singleItem[field].toLowerCase().includes(value.toLowerCase())
);

}}

и список файлов ts: 

export class FileListComponent implements OnInit {

files: Observable<File[]>;
searchString: string;
constructor(private fileService: FileService) {}

ngOnInit() {
  this.reloadData();
 }

reloadData() {
  this.files = this.fileService.getFileList();
 }

}

Я получил помощь из этого урока здесь для части трубы: https://offering.solutions/blog/articles/2016/11/21/how-to-implement-a-table-filter-in-angular/

и он говорит, что ngFor должен выглядеть так: 

<tr
*ngFor="let food of foods | filter : 'name' : searchString; let i = index"

>

но так как у меня также есть | async, я не могу поставить все условия .. Я предполагаю, что это проблема ..

КАК я могу написать что-то вроде <tr *ngFor="let file of files | async ; filter : 'name' : searchString; let i = index ">?

Буду признателен за любую помощь

1 Ответ

1 голос
/ 16 апреля 2020

Используйте круглые скобки, например, так: 

*ngFor="let food of (foods | async) | filter : 'name' : searchString; let i = index"

Взгляните на StackBlitz demo

...