Javascript 角度材质6中自动完成的无限卷轴

我正在尝试在angular material 6中实现自动完成的无限滚动。我的场景很简单，我有一个启用了自动完成的输入字段。当用户键入时，我将使用输入字段中的文本进行HTTP调用，以将结果显示为建议。但我只想显示25条建议，当用户滚动到底部时，如果结果数超过25条，我想再添加一条25条建议。 就像在《角2》中一样

我在网上找不到

请建议或帮助我。先谢谢你

{{option}}

---

我知道这个帖子很旧，但我会把解决方案留在这里，以防有人需要它

诀窍是获取mat autocomplete面板的滚动条的引用。我使用自定义指令完成了此操作：

从'@angular/core'导入{指令，ElementRef，EventEmitter，输入，输出，主机，Self，可选，AfterViewInit，OnDestroy}； 从“@angular/material”导入{MatAutocomplete}； 从“rxjs”导入{Observable，fromEvent，of，Subject，merge，combineLatest}； 从“rxjs/operators”导入{map、startWith、switchMap、tap、debounceTime、filter、scan、withLatestFrom、mergeMap、takeUntil、takeWhile、distinctUntilChanged、skipUntil、defaustmap、endWith}； 从“rxjs包含时获取”导入{takeWhileInclusive}； 导出接口IAUTOMPLETESCROLLEVENT{ 自动完成：自动完成； 滚动事件：事件； } @指示{ 选择器：“mat自动完成[选项滚动]” } 导出类选项Scroll指令实现OnDestroy{ @输入阈值百分比=.8； @输出'optionScroll'scroll=新事件发射器； _onDestroy=新主题； 构造函数公共自动完成：MatAutocomplete{ 此文件为.autoComplete.opened.pipe 点击=>{ //注意：打开“自动完成”时，面板尚未通过覆盖创建 //注：该面板将在下一次勾选时可用 //注意：如果没有显示选项，面板将不会打开 设置超时=>{ //注意：删除listner只是为了安全，以防跳过关闭事件。 此.removeScrollEventListener； this.autoComplete.panel.nativeElement .addEventListener'scroll'，this.onScroll.bindthis }; }, 下载此文件。_onDestroy.subscribe； 此文件为.autoComplete.closed.pipe 点击=>this.removeScrollEventListener， 下载此文件。_onDestroy.subscribe； } 私人删除CrolleventListener{ this.autoComplete.panel.nativeElement .removeEventListener'scroll'，this.onScroll； } 恩戈德斯特罗{ 这个。_onDestroy.next； 此项完成； 此.removeScrollEventListener； } OnScrolleEvent：事件{ 如果此值为0.thresholdPercent==未定义{ this.scroll.next{autoComplete:this.autoComplete，scrollEvent:event}； }否则{ const threshold=this.thresholdPercent*100*event.target.scrollHeight/100； const current=event.target.scrollTop+event.target.clientHeight； //log`scroll${current}，阈值：${threshold}` 如果当前>阈值{ //控制台。记录“加载下一页”； this.scroll.next{autoComplete:this.autoComplete，scrollEvent:event}； } } }

---

} 我知道这个帖子很旧，但我会把解决方案留在这里，以防有人需要它

诀窍是获取mat autocomplete面板的滚动条的引用。我使用自定义指令完成了此操作：

从'@angular/core'导入{指令，ElementRef，EventEmitter，输入，输出，主机，Self，可选，AfterViewInit，OnDestroy}； 从“@angular/material”导入{MatAutocomplete}； 从“rxjs”导入{Observable，fromEvent，of，Subject，merge，combineLatest}； 从“rxjs/operators”导入{map、startWith、switchMap、tap、debounceTime、filter、scan、withLatestFrom、mergeMap、takeUntil、takeWhile、distinctUntilChanged、skipUntil、defaustmap、endWith}； 从“rxjs包含时获取”导入{takeWhileInclusive}； 导出接口IAUTOMPLETESCROLLEVENT{ 自动完成：自动完成； 滚动事件：事件； } @指示{ 选择器：“mat自动完成[选项滚动]” } 导出类选项Scroll指令实现OnDestroy{ @输入阈值百分比=.8； @输出'optionScroll'scroll=新事件发射器； _onDestroy=新主题； 构造函数公共自动完成：MatAutocomplete{ 此文件为.autoComplete.opened.pipe 点击=>{ //注意：打开“自动完成”时，面板尚未通过覆盖创建 //注：该面板将在下一次勾选时可用 //注意：如果没有显示选项，面板将不会打开 设置超时=>{ //注意：删除listner只是为了安全，以防跳过关闭事件。 此.removeScrollEventListener； this.autoComplete.panel.nativeElement .addEventListener'scroll'，this.onScroll.bindthis }; }, 下载此文件。_onDestroy.subscribe； 这是自动的 全封闭管道 点击=>this.removeScrollEventListener， 下载此文件。_onDestroy.subscribe； } 私人删除CrolleventListener{ this.autoComplete.panel.nativeElement .removeEventListener'scroll'，this.onScroll； } 恩戈德斯特罗{ 这个。_onDestroy.next； 此项完成； 此.removeScrollEventListener； } OnScrolleEvent：事件{ 如果此值为0.thresholdPercent==未定义{ this.scroll.next{autoComplete:this.autoComplete，scrollEvent:event}； }否则{ const threshold=this.thresholdPercent*100*event.target.scrollHeight/100； const current=event.target.scrollTop+event.target.clientHeight； //log`scroll${current}，阈值：${threshold}` 如果当前>阈值{ //控制台。记录“加载下一页”； this.scroll.next{autoComplete:this.autoComplete，scrollEvent:event}； } } }

---

}非常感谢您的回复，我就是这样做到的。如果有时间，你能帮我把这篇文章中的angular material 2虚拟卷轴交给我吗？我不认为这可以通过扩展mat来完成。我们只是在这里进行延迟加载，为了让虚拟滚动容器重用、墓碑等，您需要一种使用cdk虚拟滚动的不同类型的面板feature@Zapacila但是如何使用MAT_AUTOCOMPLETE_SCROLL_策略呢？非常感谢您的回复，我已经做到了这一点。如果有时间，你能帮我把这篇文章中的angular material 2虚拟卷轴交给我吗？我不认为这可以通过扩展mat来完成。我们只是在这里进行延迟加载，为了让虚拟滚动容器重用、墓碑等，您需要一种使用cdk虚拟滚动的不同类型的面板feature@Zapacila但是MAT_AUTOCOMPLETE_SCROLL_策略如何使用呢。