（Angular 5 + Grid List）ngx-infinite-scroll不会触发

Question

我在模板中使用Angular 5 + Material和Grid List（mat-grid-list），如下所示：

模板

  <div class="display settings-backgroud">
    <div class="col-sm-11" style="margin-top: 40px; height:100%; overflow: scroll;"
    infiniteScroll
    [infiniteScrollDistance]="2"
    [infiniteScrollThrottle]="50"
    (scrolled)="onScroll()"
    [scrollWindow]="false"
    >
    <mat-grid-list cols="2" rowHeight="2:1.2" class="search-results">
      <mat-grid-tile *ngFor="let profile of profiles | slice:0: limit;" >
        <da-profile-card [pacient_name]="profile.name" [age]="profile.ages" [procedure]="profile.procedure" [next_procedure]="profile.next_schedule" [schedule]="profile.schedule" [type]="profile.type" [uid]="profile.uid" [attended]="profile.attended">
        </da-profile-card>
      </mat-grid-tile>

    </mat-grid-list>
  </div>

我使用延迟加载模块，此组件的模块位于：

模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AttendanceRoutingModule } from './attendance-routing.module';
import { ProfileCardComponent } from '../../da-common/components/profile-card/profile-card.component';
import { DaCommonModule } from '../../da-common/da-common.module';
import { AttendanceService } from './attendance.service'
import { MatGridListModule } from '@angular/material';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@NgModule({
  imports: [
    CommonModule,
    AttendanceRoutingModule,
    DaCommonModule,
    MatGridListModule,
    InfiniteScrollModule
  ],
  declarations: [..],
  providers: [AttendanceService],
  entryComponents: [ProfileCardComponent]
})
export class AttendanceModule { }

指令链接：https://github.com/orizens/ngx-infinite-scroll

我尝试设置我的高度模板，添加溢出滚动，更改指令的位置但没有任何效果。当用户滚动到底部时，我的函数回调滚动没有触发。