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

您可以创建自定义管道，仅通过过滤它们来获取所选值

results

<强>用法

@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}}的AppModule @NgModule GetSelectedPipe数组中注入declarations。

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

1 个答案: