过滤的NGFOR ANGULAR计数

Question

是否有一种更简单的方法来获取具有嵌套NGIF的NGFOR中实际显示的结果的计数？

<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>

但是获得不确定的结果。我的最后一个度假胜地是在传入阵列上进行过滤器以获取计数并分配公共vars吗？还是有一种更简单的方法来获取符合条件 /显示的NGFOR结果的计数？

Answer 1

我将更改逻辑以允许过滤在.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 2

您可以尽早使用 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;
  }
}

工作示例：

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>

管中使用它，将返回过滤的数组，并且由于NGFOR提供了算作的导出值之一此处的文档您可以在ngfor表达式中分配到模板变量（length = count）