Angular如何在切片管道之前应用管道后查找ngFor中的项目计数
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular如何在切片管道之前应用管道后查找ngFor中的项目计数相关的知识,希望对你有一定的参考价值。
基本上我试图在应用切片管道之前获取管道结果的长度,代码示例是 -
<ng-container *ngFor="let sub of subs | Filter1: { Name1: name1}:true |
Filter2: { Name2: name2}:true | searchFilter: { mobilenumber: searchText }: false |
slice: startIndex:endIndex as result;let i=index;">
// table code
</ng-container>
是否有可能在数据被切片之前得到长度。我试图在ng-container中得到它“结果”但我得到“模板解析错误:”有没有人有解决方案?提前致谢
答案
我遇到了同样的问题,我通过在.ts
中使用函数和使用过滤器实现了这一点
在html文件中搜索输入字段。
<div class="is-empty">
<input class="effect-1 form-control ng-pristine ng-valid ng-touched" placeholder="Search" type="text"
[(ngModel)]="salesByCountryReportObj.search" (ngModelChange)="getFilteredResults()">
<span class="focus-border"></span>
<i class="fa fa-search"></i>
</div>
然后在.ts
文件中
import {SearchFilterPipe} from "@app/shared/pipes/search-filter.pipe";
@Component({
selector: 'app-sales-by-country',
templateUrl: './sales-by-country.component.html',
styleUrls: ['./sales-by-country.component.scss'],
providers: [ SearchFilterPipe ]
})
export class SalesByCountryComponent implements OnInit {
constructor(private searchFilter: SearchFilterPipe){}
getFilteredResults() {
let filteredArray = this.searchFilter.transform(this.subs, this.salesByCountryReportObj.search);
console.log(filteredArray.length);
}
}
另一答案
几天前我有同样的问题,我做的是创建另一个div:
<div #count>{{(subs | filter:searchText).length}}</div>
<ng-container *ngFor="let sub of subs | Filter1: { Name1: name1}:true |
Filter2: { Name2: name2}:true | searchFilter: { mobilenumber: searchText }: false |
slice: startIndex:endIndex as result;let i=index;">
// table code
</ng-container>
在.ts文件中:
@ViewChild('count') count: any;
console.log(+(this.count.nativeElement.innerText));
这可能看起来像黑客,并且可以有更好的解决方案。
以上是关于Angular如何在切片管道之前应用管道后查找ngFor中的项目计数的主要内容,如果未能解决你的问题,请参考以下文章
如何在生产版本上升级 Angular 7 后修复“错误:模板解析错误:找不到管道‘异步’”