已过滤的 ngfor 计数 angular

Question

有没有更简单的方法来获取 ngFor 中实际显示结果的计数，而 ngFor 没有嵌套的 ngIf？

<div *ngFor="let stuff of things">
   <ng-container *ngIf="stuff.key === 'value'">
     **I'd like an easier way to get the result of this *ngIf .length and use it elsewhere**
   </ng-container>
</div>

我尝试使用@ViewChildren 并希望得到；

@ViewChildren('myContainerRef') containerRef: QueryList<any>

<label>Count {{ myContainerRef.length }}</label>
<div #myRef *ngFor="let stuff of things">
</div>

但得到未定义的结果。我最后的手段是对传入数组进行过滤以获取计数并将其分配给 public 变量吗？或者是否有更简单的方法来获取匹配条件/显示的 ngfor 结果的计数？

Answer 1

最早可以在AfterViewInit中使用ViewChildren。您可以搜索 ng-container，但最好使用 #myRef 搜索您要搜索的元素，这样它只会计算您感兴趣的元素。

<div *ngFor="let stuff of things">
  <ng-container #myRef>
    {{ stuff }} **I'd like an easier way to get the result of this *ngIf .length
    and use it elsewhere**
  </ng-container>
</div>
<br />
TotalContainers: {{ containersCount }}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterContentChecked {
  @ViewChildren('myRef') containers: QueryList<ElementRef>;

  things = Array.from(Array(10).keys());
  containersCount: number;

  constructor() {}

  ngAfterContentChecked() {
    this.containersCount = this.containers?.length;
  }
}

工作示例：https://stackblitz.com/edit/angular-ivy-vpq5n4?file=src%2Fapp%2Fapp.component.ts

Answer 2

我会更改逻辑以允许在 .ts 文件中进行过滤，然后您同时拥有可迭代对象和计数...

下面允许对原数组进行过滤，长度为匹配项的个数

.component.ts
   const filteredThings= things.filter(x => x.key === 'value');

.component.html
   <div *ngFor="let thing of filteredThings">
      {{ thing.xyz }} {{filteredThings.length}}
   </div>

Answer 3

你可以像这样创建管道

@Pipe({
  name: 'filterThings',
})
export class FilterThingsPipe implements PipeTransform {

  transform(array: Thing[], value: string): Thing[] {
    return array.filter(item => item.key == value);
  }

}

然后在模板中使用它

<div *ngFor="let stuff of things | filterThings:'val1'; let length = count">
  {{stuff.key}} of {{length}}
</div>

Pipe 将 return 过滤数组，并且由于 ngFor 提供计数作为其导出值之一 docs here 您可以在 ngFor 表达式 [=13= 中分配给模板变量（长度 = 计数） ]

已过滤的 ngfor 计数 angular

Count of filtered ngfor angular

ngfor

angular