Question

基本上我有一个包含数据的数组。

aData=[
 {"name":"marge"},
 {"name":"homer"},
 {"name":"bart"},
 {"name":"homer"},
 {"name":"lisa"
]

我正在过滤名称等于“ homer”的地方。

<p>Total data is {{i}}</p>
<div *ngFor="let item of aData; let i=index">
  <span *ngIf="item.name='homer'"></span>
</div>

显示在其他位置过滤的元素的总长度。

 <p>Total data is {{i}}</p> //this result is blank

我的数据是动态的，结果并不总是2（在这种情况下）

我该怎么办？

Answer 1

首先，如果要比较值，则应使用三重等于===。应该是*ngIf="item.name==='homer'"，而不是*ngIf="item.name='homer'"。

<div *ngFor="let item of aData; let i=index">
  <span *ngIf="item.name==='homer'">{{item.name}}</span>
</div>

接下来，其他用户提供的解决方案无效，如Angular no longer provide built in filter pipes.。因此，如果要使用管道解决方案来编写自己的自定义管道，则为

。

我不使用管道的替代解决方案是处理component.ts中的过滤。我们将首先定义一个名为count的属性，其中包含名称为“ homer”的元素数量的过滤后计数。

count:number = 0; 

constructor() {
  this.count = this.aData.filter(data => data['name'] === 'homer').length;
}

在您的component.html上，我们使用模板插值法在您的视图上反映属性值。

<p>Total data is {{count}}</p>
<div *ngFor="let item of aData; let i=index">
  <span *ngIf="item.name==='homer'">{{item.name}}</span>
</div>

在here上查看完整的演示。

Answer 2

我只写了基本的Angular搜索过滤器代码段，其计数为Total Items和Filtered Items。希望对您有帮助。谢谢

TS

aData=[
 {"name":"marge"},
 {"name":"homer"},
 {"name":"bart"},
 {"name":"homer"},
 {"name":"lisa"}
]

HTML

<input type="text" name="search" [(ngModel)]="searchText">
<p>Total data is {{aData.length}}</p>
<div *ngFor="let item of aData | filter:searchText; let i=index">
  <span *ngIf="item.name='homer'"></span>
</div>
<p>Total Filtered data is {{(aData | filter:searchText).length}}</p>

使用* ngIf获得过滤数据之后的总数据

2 个答案: