角度-使用管道过滤表格

Question

我是angular的新手，正在尝试制作我的第一个全栈程序，我使用angular和spring引导。我想做的是从服务器上获取文件，并使用angular将它们显示在表中。我设法做到了这一点，但现在我想在表上添加一个填充选项，我一直在使用管道来做这件事，但它似乎不起作用，我的真相是在的html部分

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

找不到一种方法来写所有的条件而不得到错误

这是我的客户端代码：html部分：

<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 ">的东西？

如有任何帮助，将不胜感激

Answer 1

使用这样的括号：

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

看看StackBlitz演示