Question

我已经实现了primeng-autocomplete，并且在滚动结束时需要加载下一个元素。我经历了一些封闭的问题，找到了这个问题：

https://github.com/primefaces/primeng/issues/513

这是封闭的，但是任何想法如何实现。任何帮助将不胜感激。

Answer 1

我有解决方法，但我希望有人有更好的选择。 Angular v.7，primng v.7：

在模板中：

添加completeMethod：

<p-autoComplete
  #autocompletePanel
  (completeMethod)="completeHandler($event)">
  ...
</p-autocomplete>

在* .ts文件中：

添加对自动完成的引用：

@ViewChild('autocompletePanel') autocompletePanel;

将Renderer2注入构造函数中：

constructor(private renderer: Renderer2){}

添加处理程序：

public completeHandler(): void {
//you need to wait for panel to be added to the DOM (any better solutions?)
  setTimeout(() => {
    const autocompletePanel = this.autocompletePanel.el.nativeElement.querySelector('.ui-autocomplete-panel');
    if (autocompletePanel) {
      this.renderer.listen(autocompletePanel, 'scroll', event => {
        if ((event.target.scrollHeight - event.target.clientHeight) === event.target.scrollTop)) {
          // ... handle it
          console.log('scrolled to the bottom of the panel');
        }
      }
    }
  }, 500);
}

滚动到底部时自动完成事件

1 个答案: