用于在复选框中获取项目数量的角度自定义管道

Question

我正在尝试计算已选中复选框的数量。为此，我添加了一个自定义管道：

import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
    name: 'getSelected',
})
@Injectable()
export class GetSelectedCountPipe implements PipeTransform {
    transform(items: any[]): any {
        // take out only selected values
        return items.filter(item => item.selected === true);
    }
}

现在我正在尝试在组件中使用它。我的问题是我不知道该如何使用管道，或者应该在何处或添加什么以使html返回计数。这就是我的复选框列表的创建方式。

 <mat-cell *matCellDef="let group"> 
        <mat-checkbox [(ngModel)]=group.selected>{{group.name}}</mat-checkbox>
      </mat-cell>

这是我要添加/获取计数的地方。 （此问题已修复，因为它将包括将获得长度/计数的自定义管道）

 <span style="white-space: nowrap;">XXXX Selected</span>

任何人都可以提供协助吗？

Answer 1

您应按照下面的演示，在要绘制的管道中返回string

https://stackblitz.com/edit/angular-iaswzg