按下离子选择选项时如何应用过滤器

Question

您好，在我的 Ionic 5 Angular 14 项目中，我想使用 ion-select 来过滤对象数组。 Ionic 使用“确定”和“取消”按钮来应用过滤器，但我不希望这样。我希望当用户单击其中一个 时

html

                <ion-select placeholder="Choose one..." [(ngModel)]="filters.media" (ionChange)="applyUsersFilter()">
                    <ion-select-option value="all">All Users</ion-select-option>
                    <ion-select-option  value="most">Most Media</ion-select-option>
                    <ion-select-option value="less">Less Media</ion-select-option>
                </ion-select>   

ts。功能

allArtistsSet() {
    this.userData.allArtists(this.offset).pipe(
        map((data: any) => {
            if (data.success) {
                const temp = data.artistsFeed;
                for (let i = 0; i < temp.length; i++) {
                    for (let j = 0; j < this.editors.length; j++) {
                        if (temp[i].uid == this.editors[j].uid) {
                            temp[i].selected = true;
                        }
                    }
                }

                this.allArtists = temp;
                this.filtered = temp;
                this.updateCreativenessArtists();
            }
        })
    ).subscribe()
    console.log(this.allArtists);
}

applyUsersFilter() {
    console.log('applyUsersFilter() called'); // Log to check if the function is called

    console.log('filters', this.filters);
    console.log('artists', this.allArtists);

    let result = [...this.allArtists]; // Create a shallow copy to avoid mutating the original array

    if (this.filters.media) {
        if (this.filters.media == 'most') {
            result.sort((a, b) => b.updates_count - a.updates_count); // Sort descending
        } else if (this.filters.media == 'less') {
            result.sort((a, b) => a.updates_count - b.updates_count); // Sort ascending
        }
        this.filtered = result;
    }
    console.log('filtered', this.filtered); // Log the filtered array
}

Answer 1

离子选择的默认界面是“警报”，因此您会看到这些按钮。

您可能想使用“弹出窗口”界面，其工作原理与您所描述的类似。

    <ion-select aria-label="Fruit" interface="popover" placeholder="Select fruit">
      <ion-select-option value="apples">Apples</ion-select-option>
      <ion-select-option value="oranges">Oranges</ion-select-option>
      <ion-select-option value="bananas">Bananas</ion-select-option>
    </ion-select>

在这种情况下，更改检测将对每个选择都有效。

另一个不错的选择是“操作表”。

<ion-select
  label="Action Sheet"
  [interfaceOptions]="customActionSheetOptions"
  interface="action-sheet"
  placeholder="Select One"
>

这里是所有 3 个选项的文档 - 试用它们。 https://ionicframework.com/docs/api/select#interface-options

如果您不喜欢这些选项中的任何一个 - 您可能需要使用纯 HTML 的

select

标记和角度变化检测来构建自定义选项。应该没那么难吧。