angular - 在过滤器输入中按下键后,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" 时,没有问题。
解决方案
我通过更新multiselect.ts
文件来解决这个问题
components/multiselect/multiselect.ts
ngAfterViewChecked() {
if (this.filtered) {
this.filtered = false;
}
}
它现在工作正常,它不会到达屏幕的角落。虽然修改模块中的文件不好,但我想他们会在下一个版本中修复它。
推荐阅读
- javascript - 如何在ag-grid的树数据中折叠子行元素后获取子行元素
- java - 子布局视图显示在父布局视图下方
- gulp - 从 gulp v3 更改为 v4 后,gulp.series 没有运行所有应用的任务
- php - 如何解决 OG:image 编码问题?
- python - 仅在生产时抛出“内部错误 500”的两个 Django 视图
- android - 如何基于onItemSelectedListener在textview中显示纺织品?
- ios - 将文本从单元格传输到下一个 VC 中的标签时,第一次打开 VC 时不会出现
- python - 使用类和排序时如何编写列表来更新文本文档?
- iphone - IOS Hybrid App - 避开 iPhone 11 上的安全区域
- c# - 当在 DB 中验证条件时,在 LINQ 中的 EF Core 3.0 条件排序