如何通过“角度材料选择”使用用户选择的值进行过滤？

Question

我试图用角形材料创建一个下拉过滤器。这是我的下拉选项的数组

 public intensities = ['All',1,2,3,4,5]

这是垫选择字段的html。

    <mat-form-field>
                    <mat-select placeholder="Choose Intensity" [(ngModel)]="selectedIntensity" (selectionChange)="onIntensityChange()">
                        <mat-option *ngFor="let intensity of intensities" [value]="intensity">
                            {{intensity}}
                        </mat-option>
                    </mat-select>
     </mat-form-field>

 <div class="flex-wrap" style="display: inline-block; padding: 5px 0 5px 20px;">
                <span style="font-weight:bold;">Show Shoppers With: </span>
                <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutPhone" (change)="filterVisibleShoppers()">Phone
                <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutEmail" (change)="filterVisibleShoppers()">Email
                <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutAddress" (change)="filterVisibleShoppers()">Address
                <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutTradeIn" (change)="filterVisibleShoppers()">Trade In
            </div>

我正在尝试编写一个函数“ onIntensityChange（）”，该函数根据用户选择显示正确的选择。我还有一个与复选框配合使用的过滤器。我希望能够基于两个选择（下拉菜单和复选框）进行过滤。这是打字稿文件。

   @Component({
        templateUrl: 'daily-active-shopper.screen.html',
    })

    export class DailyActiveShoppersScreen {

        public selectedDate: Date;
        public maxDate: Date = new Date();
        public count = 0;
        public customers;
        public loading: boolean;

        public hiddenWithoutEmail: boolean;
        public hiddenWithoutPhone: boolean;
        public hiddenWithoutAddress: boolean;
        public hiddenWithoutTradeIn: boolean;

        _dealerId: number;

        activeShopperDay: DailyActiveShopperDay;
        visibleActiveShoppers: DailyActiveShopper[];

        shopperDetailsVisible = true;
        shopperErrorMessage: string;

        public intensities = ['All',1,2,3,4,5]
        public selectedIntensity: any; 

 filterVisibleShoppers() {
        let shoppers = this.activeShopperDay.shoppers;
        if (this.hiddenWithoutAddress) {
            shoppers = shoppers.filter((shopper) => {
                return shopper.state !== null;
            });
        }
        if (this.hiddenWithoutPhone) {
            shoppers = shoppers.filter((shopper) => {
                return shopper.phone !== null;
            });
        }
        if (this.hiddenWithoutEmail) {
            shoppers = shoppers.filter((shopper) => {
                return shopper.email !== null;
            });
        }
        if (this.hiddenWithoutTradeIn) {
            shoppers = shoppers.filter((shopper) => {
                return shopper.currentVehicle;
            });
        }
        this.visibleActiveShoppers = shoppers;
    }

    onIntensityChange() {
        console.log(this.selectedIntensity);
        let shoppers = this.activeShopperDay.shoppers;
            if(this.selectedIntensity === 'All') {
                shoppers = shoppers.filter((shopper) => {
                    return this.visibleActiveShoppers = shoppers;
                })
            }
            if(this.selectedIntensity === 1) {
               shoppers = shoppers.filter((shopper) => {
                    return shopper.intensity === this.selectedIntensity
                })
            }
            if(this.selectedIntensity === 2) {
                shoppers = shoppers.filter((shopper) => {
                    return shopper.intensity === this.selectedIntensity
                })
}
            if(this.selectedIntensity === 3) {
                shoppers = shoppers.filter((shopper) => {
                    return shopper.intensity === this.selectedIntensity
                })
            }
            if(this.selectedIntensity === 4) {
                shoppers = shoppers.filter((shopper) => {
                    return shopper.intensity === this.selectedIntensity
                })
            }
            if(this.selectedIntensity === 5) {
                shoppers = shoppers.filter((shopper) => {
                    return shopper.intensity === this.selectedIntensity
                })
            }

            if(this.visibleActiveShoppers.length < 1) {
                console.log("None found for this intensity")
            }
            this.visibleActiveShoppers = shoppers;
    }

我正在寻找实现此目标的正确方法。基本上允许用户根据强度和四个单选按钮进行过滤。