Comment obtenir le nombre de cases cochées et afficher le nombre dans Angular 2?

Question

J'ai besoin d'aide pour afficher le décompte d'une liste de cases à cocher dans la valeur d'une liste déroulante. D'où ai-je besoin pour obtenir mon compte? Les cases à cocher sont transmises dynamiquement en tant que tableau.

Voici mon code actuel.

DropDownBox Composant

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

composant Checkbox

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

Le composant case est <cst-checkbox> dans le composant déroulant.

Answer 1

Vous pouvez créer votre pipe personnalisée pour obtenir sélectionné uniquement les valeurs, en les filtrant jusqu'à

@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); 
    } 
} 

Utilisation

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

Note: Make sure GetSelectedPipe has been injected in declarations of AppModule's @NgModule declartions array.