如何使用angular中的复选框值过滤列表行？

Question

html（我有带有用于列出行的选项的“筛选器”按钮。）

 <button mat-raised-button [matMenuTriggerFor]="filter">Filter</button>
    <mat-menu #filter="matMenu" yPosition="below" xPosition="before">
        <ng-template matMenuContent>
                <div class="row">
                    <div class="col-6">
                        <section class="example-section" (click)="$event.stopPropagation();">
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Active</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Expired</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Grace</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Trial</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Invited</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >InActive</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >A-Z</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Expiry Date</mat-checkbox>
                        </section>
                    </div>

                </div>
        </ng-template>
    </mat-menu>

component.ts（如何使用此方法过滤值？）

checkBoxFilter(event){

 }

Answer 1

You can achieve it like below.

Template Code

    <button mat-raised-button [matMenuTriggerFor]="filter">Filter</button>
    <mat-menu #filter="matMenu" yPosition="below" xPosition="before">
        <ng-template matMenuContent>
            <div class="row">
                <div class="col-6">
                    <section class="example-section">
                        <mat-checkbox *ngFor="let opt of options" value="{{opt.value}}" [(ngModel)]="opt.checked"
                            (change)="checkBoxFilter()" class="example-margin">{{ opt.name }}</mat-checkbox>
                    </section>
                </div>

            </div>
        </ng-template>
    </mat-menu>

In the component we are having the selected values in selectedOpt variable based on that we can apply the filter.

    selectedOpt: string[];
    options = [
        { name: "Active", value: "active", checked: false },
        { name: "Expired", value: "expired", checked: false }
      ];
      checkBoxFilter() {
        this.selectedOpt = this.options.filter(o => o.checked).map(o => o.value);
        console.log(this.selectedOpt);
      }