如何获取所选复选框的计数并在 Angular 2 中显示计数？

Question

我需要帮助将复选框列表的计数显示为下拉框的值。我需要从哪里获取计数？复选框作为数组动态传递。

这是我当前的代码。

DropDownBox 组件

<div ngbDropdown class="d-inline-block" [autoClose]="false">
     <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle{{title}}`(need to display the count here)`
     </button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <input type="text" placeholder="{{searchPlaceholder}}" class="searchBox" />
             <div *ngFor="let data of datas">
                   <cst-checkbox [checkBoxValue] = "data" [ngModel]="data.selected"></cst-checkbox>
             </div> 
       </div> 
</div>

复选框组件

<div class="checkbox">
     <input type="checkbox" value="{{checkBoxValue}}" />
     <label>{{checkBoxValue}}</label>     
</div>

复选框组件是下拉组件中的<cst-checkbox>。

Answer 1

您可以创建自定义管道以仅获取选定的值，方法是过滤它们

@Pipe({
    name: 'getSelcted',
    pure: false
})
@Injectable()
export class GetSelectedPipe implements PipeTransform {
    transform(items: any[]): any {
        // take out only selected values
        return items.filter(item => item.selected === true);
    }
}

用法

{{(datas: getSelcted)?.length || 0}}

注意：确保GetSelectedPipe已被注入到AppModule的@NgModule declartions数组的declarations中。