首页 > 解决方案 > 在过滤器输入中按下键后,primeng 多选选项框跳转到位置 0,0

问题描述

我在数据表中使用primeng 多选控件。
当我把它放在 ng-template pTemplate="editor" 中时,我得到了异常行为:

第一次打开多选,一切正常。但是当我在过滤器输入中写入任何键时,选项列表会跳转到屏幕的 0,0 位置。

html代码:

<ng-template *ngIf="itemProperty.widget=='multiSelect'&& itemProperty.name.indexOf('.')<0" let-row="rowData" pTemplate="editor">
                <p-multiSelect
                [displaySelectedLabel]="itemProperty.displaySelectedLabel? 'true':'false'"
                    [defaultLabel]="itemProperty.defaultLabel?'Choose':'...'"
                    optionLabel="Name"
                    [disabled]="itemProperty.editableOnlyInsert&&row.RowState!=3"
                    #con="ngModel"
                    [options]="itemProperty.options"
                    [(ngModel)]="row.Modules"
                    appendTo="body"                        [filter]="itemProperty.options&&itemProperty.options.length>5"
                    (onChange)="editItem(row,con,false,$event,true)" >
                </p-multiSelect>
            </ng-template>

第一次点击多选后:

在此处输入图像描述

在过滤器输入中写入内容后:

在此处输入图像描述

当我使用 pTemplate = "body" 时,没有问题。

标签: angularprimengmulti-select

解决方案


我通过更新multiselect.ts文件来解决这个问题

components/multiselect/multiselect.ts

ngAfterViewChecked() {
        if (this.filtered) {
            this.filtered = false;
        }
    }

它现在工作正常,它不会到达屏幕的角落。虽然修改模块中的文件不好,但我想他们会在下一个版本中修复它。


推荐阅读