import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>Virtual Scroll</h2> <eui-datalist style="width:600px;height:250px" [data]="data" [total]="total" [virtualScroll]="true" [rowHeight]="75" [pageSize]="pageSize" [(selection)]="selection" selectionMode="single"> <ng-template euiItemTemplate let-row let-rowIndex="rowIndex"> <div class="product"> <div class="num">{{rowIndex+1}}</div> <div class="detail"> <p>{{row.inv}} - {{row.name}}</p> <p>Amount: {{row.amount}}</p> <p>Price: {{row.price}}</p> </div> </div> </ng-template> </eui-datalist> <p *ngIf="selection">You selected: {{selection.name}}</p> `, styles: [` .product{ display: flex; align-items: center; padding: 5px 0; height: 75px; border-bottom: 1px solid #eee; } .product .num{ width: 40px; height: 40px; background: #b8eecf; border-radius: 20px; text-align: center; line-height: 40px; margin: 0 10px; } .product img{ height: 100px; padding: 10px; } .product p{ margin: 0; padding: 2px 0; } `], providers: [DataService] }) export class AppComponent { total = 10000; pageSize = 20; data = []; constructor(public dataService: DataService){} ngOnInit() { this.dataService.getData(this.total).subscribe((data) => { this.data = data.rows; }); } }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/observable/of'; @Injectable() export class DataService { getData(total: number) { let data = []; for(let i=1; i<=total; i++){ let amount = Math.floor(Math.random()*1000); let price = Math.floor(Math.random()*1000); data.push({ inv: 'Inv No '+i, name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return Observable.of({ total: total, rows: data }); } }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);