html - Làm thế nào để tôi lấy số lượng các hộp kiểm được chọn và hiển thị số lượng đó trong Angular 2?

Tôi cần trợ giúp hiển thị số lượng của một danh sách các hộp kiểm vào giá trị của một hộp thả xuống. Tôi cần lấy số đếm của mình từ đâu? Các hộp kiểm đang được truyền động dưới dạng một mảng.

Đây là mã hiện tại của tôi.

Thành phần 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>

Thành phần hộp kiểm

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

Thành phần hộp kiểm là <cst-checkbox> trong thành phần trình đơn thả xuống.

Câu trả lời #1

Bạn có thể tạo Ống tùy chỉnh của mình để chỉ lấy các giá trị đã chọn, bằng cách lọc chúng lên

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

Sử dụng

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

Lưu ý: Hãy chắc chắn rằng GetSelectedPipe đã được chèn vào trong declarations của mảng declarations trong @NgModule của AppModule.