【问题标题】:ng-multiselect-dropdown onDeSelectAll() not workingng-multiselect-dropdown onDeSelectAll() 不起作用
【发布时间】:2019-04-08 20:32:22
【问题描述】:

我在我的角度代码中使用 ng-multiselect 下拉菜单。虽然所有 onSelect、onSelectAll、onDeSelect 方法都工作正常,但 onDeselctAll 方法不接收取消选择的项目数组。我查看了官方网站,但没有用:https://www.npmjs.com/package/ng-multiselect-dropdown。 知道我哪里可能出错了吗? PFB代码sn-p:

.html 文件

<ng-multiselect-dropdown *ngIf="filteredSids.length > 0"
                                             [data]="filteredSids"
                                             [disabled]="false"
                                             [(ngModel)]="selectedSids"
                                             (onSelect)="selectedSIDs($event); onItemSelect($event)"
                                             (onSelectAll)="onSelectAll($event)"
                                             (onDeSelect)="onItemDeSelect($event)"
                                             (onDeSelectAll)="onDeSelectAll($event)"
                                             [settings]="dropdownSettings"
                                             formControlName="sidControl">
                    </ng-multiselect-dropdown>

.ts 文件

onSelectAll(selectedSIDList: Array<string>): void {
        selectedSIDList.forEach(sid => {
            this.selectedSIDs(sid);
            this.onItemSelect(sid);
        });
    }

    onItemDeSelect(deselectedSID: any): void {
        this.selectedSIDList = this.selectedSIDList.filter(s => s != deselectedSID);

        this.selectedSIDList.forEach(sid => {
            this.onItemSelect(sid);
        });
    }

    onDeSelectAll(items: any){
        console.log(items); // items is an empty array
    }

【问题讨论】:

    标签: angular


    【解决方案1】:

    根据source code,接收空数组是正确的行为:

    this.selectedItems = [];
    this.onDeSelectAll.emit(this.emittedValue(this.selectedItems));
    

    如果要跟踪被取消选择的项目,则需要另辟蹊径。

    【讨论】:

    • 我们可以停止 onDeSelect() 事件的默认行为吗?我有一个场景,如果我单击所选项目上的“x”。它将打开一个弹出窗口,其值为“是”和“否”。如果我单击否,它应该保留选定的值。否则,它应该删除该值。
    猜你喜欢
    • 1970-01-01
    • 2018-04-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-21
    • 2020-12-15
    • 2019-10-15
    • 2019-06-02
    相关资源
    最近更新 更多