Angular 如何在切片管道之前应用管道后查找 ngFor 中的项目数答案

【问题标题】：Angular How to find the count of items in an ngFor after the pipes have been applied before slice pipeAngular 如何在切片管道之前应用管道后查找 ngFor 中的项目数
【发布时间】：2019-05-15 09:34:34
【问题描述】：

基本上，我试图在应用切片管道之前获取管道结果的长度，代码示例是 -

<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 中“作为结果”得到它，但我得到“模板解析错误：”有人有解决方案吗？提前致谢

【问题讨论】：

您似乎需要edit您的问题，并确保您的代码和完整错误消息正确包含在此处。
在图片中添加了问题
你的意思是你想要subs切片之前的长度还是什么？
检查您的角度版本。该代码适用于 Angular 4+。您使用的是哪个版本的角度？查看stackoverflow.com/questions/35127257/…了解更多详情
是的，我想要切片之前的子长度。

标签： angular pipe

【解决方案1】：

我遇到了同样的问题，我通过在.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);
}

}

【讨论】：

【解决方案2】：

几天前我遇到了同样的问题，我所做的是创建另一个 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));

这可能看起来像一个 hack，但可以有更好的解决方案。

【讨论】：