我正在开发Angular项目并使用 ngx-infinite-scroll 来显示包含数据库数据的页面。当我按照 ngx-infinite-scroll 的用户指南时,我通过npm安装它,然后将模块添加到一个文件中,该文件导出数组中的所有模块:
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {AppRoutingModule} from '../../app-routing.module';
import { InfiniteScrollModule } from "ngx-infinite-scroll";
export const ModulesExport= [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule,
InfiniteScrollModule
];
之后,我在 app.module.ts 中导入了该数组,并将其添加到导入模块中。
import { NgModule } from '@angular/core';
/* import all modules, services and components from package export files */
import {ProvidersExport} from './export/providers-services/export-providers';
import {ComponentsExport} from './export/components/export-components';
import {ExportComponentsObj} from './export/components/export-components-obj';
import {ModulesExport} from './export/modules/export-modules';
@NgModule({
declarations: [...ComponentsExport],
imports: [...ModulesExport],
providers: [...ProvidersExport],
bootstrap: [ExportComponentsObj.App]
})
export class AppModule { }
所以在添加完所有内容之后,我创建了我的组件并在我的html组件中包含了无限滚动所需的参数:
<div class="row center container">
<div class="journeysWrapper" style="height: 100%" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="300" (scroll)="loadMore()">
<app-journey-preview *ngFor="let journey of journeys" [journey]="journey" [journeyCount]="journeys.length" class="center row container"></app-journey-preview>
</div>
</div>
我现在正试图测试一切是否正常,只是在触发滚动事件时记录一个示例字符串:
loadMore() {
console.log('scrolled down!!');
}
不幸的是,当我加载页面时,我收到以下错误:
所以现在我陷入了这个错误,我无法弄清楚它为什么会出现。任何帮助将不胜感激!
答案 0 :(得分:0)
该函数是Scroll insted滚动, (滚动)=“ fn()”