angular - 在过滤器输入中按下键后，primeng 多选选项框跳转到位置 0,0

Question

我在数据表中使用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" 时，没有问题。

Answer 1

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

components/multiselect/multiselect.ts

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

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

Answer 2

数据表已删除。您可以与 turbotable 一起使用，也可以试试这个（删除 appendTo="body"）

<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"
                [filter]="itemProperty.options&&itemProperty.options.length>5"
                (onChange)="editItem(row,con,false,$event,true)" >