Angular 选择无限滚动组件

Angular 选择无限滚动组件
插件名称 ng-mat-select-infinite-scroll
发布时间 2020年4月18日
插件作者 HaidarZ

Angular选择组件添加缺少的无限滚动功能的组件。

安装:

# NPM
$ npm install ng-mat-select-infinite-scroll --save

使用:

1.导入MatSelectInfiniteScrollModule到app.module.ts内部

import { MatFormFieldModule, MatSelectModule } from '@angular/material/select';
import {MatSelectInfiniteScrollModuleMatSelectInfiniteScrollModule} from 'ng-mat-select-infinite-scroll';

@NgModule({
        declarations: [
                AppComponent
        ],
        imports: [
                BrowserModule,
                BrowserAnimationsModule,
                MatFormFieldModule,
                MatSelectModule,
                MatSelectInfiniteScrollModule
        ],
        providers: [],
        bootstrap: [AppComponent]
})
export class AppModule {}

2.然后将msInfiniteScroll指令放在mat-select组件上

<mat-form-field appearance="outline">
<mat-label>Select</mat-label>
<mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" [complete]="offset === data.length">
<mat-option *ngFor="let option of options$ | async" [value]="option">{{option}}</mat-option>
</mat-select>
</mat-form-field>