【问题标题】:Angular ngx-infinite-scroll is not workingAngular ngx-infinite-scroll 不起作用
【发布时间】:2018-06-01 11:03:16
【问题描述】:

我正在开发 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!!');
  }

不幸的是,当我加载页面时,我收到以下错误:

所以现在我被这个错误困住了,我无法弄清楚它为什么会出现。任何帮助将不胜感激!

【问题讨论】:

  • 你用的是什么角度版本?
  • 插件文档似乎存在问题。我检查了插件 github 并注意到他们忘记提到需要特定版本才能在新版本的 angular 上运行它。在我进行更改后,一切都开始正常工作了。

标签: javascript angular scroll infinite-scroll


【解决方案1】:

功能是Scrolled insted滚动, (滚动)="fn()"

【讨论】:

    猜你喜欢
    • 2022-12-14
    • 2020-05-27
    • 2021-06-24
    • 2020-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多