ngFor 基于使用管道的搜索进行过滤 - 这工作正常,
现在我必须根据搜索查询添加 ngIf 条件
如果没有结果,那么我必须显示另一个带有“无数据”文本的新 div
<input type="text" [(ngModel)]="queryString" placeholder="Search to type">
<li *ngFor="let project of projects | FilterPipe: queryString ;>
{{project.project_name}}
</li>
//管道
transform(value: any, input:any ): any {
if(input){
input = input.toLowerCase();
return value.filter(function (el: any) {
return el.project_name.toLowerCase().indexOf(input) > -1;
})
}
return value;
}
最佳答案
要在模板中使用 filter
管道的结果,您可以在 as
关键字的帮助下创建一个局部变量。
<li *ngFor="let project of (projects | FilterPipe: queryString) as results">
{{project.project_name}}
</li>
现在您可以在 results
变量中访问过滤器管道的结果。但是这个局部变量的范围现在仅限于托管 HTML 元素及其子元素。我们可以通过稍微重写您的代码来解决这个问题。
<ul *ngIf="(projects | FilterPipe: searchQuery) as results">
<li *ngFor="let project of results">
{{project.project_name}}
</li>
<span *ngIf="results.length === 0">No data</span>
</ul>
这样我们就扩展了 results
变量的范围,我们可以很容易地使用它在过滤后的数据集为空时显示 No Data
。
这是关于 StackBlitz 的工作示例.
关于javascript - 管道数据过滤中的 Angular ngFor ngIF 条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57285679/