Wie erhalte ich die Anzahl der ausgewählten Kontrollkästchen und zeige die Anzahl in Angular 2 an?

Question

Ich brauche Hilfe, die Zählung einer Liste von Checkboxen in den Wert einer Dropdown-Box anzuzeigen. Wo muss ich zählen? Die Kontrollkästchen werden dynamisch als Array übergeben.

Hier ist mein aktueller Code.

Dropdownbox Component

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

Ankreuzfeld Komponente

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

Das Ankreuzfeld Komponente <cst-checkbox> im Dropdown-Komponente.

Answer 1

Sie können Ihre benutzerdefinierten Rohr erstellen, um Werte erhalten nur ausgewählte, von ihnen Filterung

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

Nutzungs

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

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