Angular Virtual ForOf 지시문 개요
Ignite UI for Angular 대량의 데이터를 템플릿화하기 위한 ngForOf의 대안입니다. 이는 가상화를 백그라운드에서 사용하여 DOM 렌더링과 메모리 소비를 최적화합니다.
Angular Virtual For Directive Example
Getting Started with Ignite UI for Angular Virtual ForOf Directive
Ignite UI for AngularigxFor 지침을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령어를 입력하세요:
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다.IgxForOfModule 당신의 app.module.ts 파일.
// app.module.ts
import { IgxForOfModule } from 'igniteui-angular/directives';
// import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxForOfModule,
...
]
})
export class AppModule {}
또는16.0.0 독립 실행형 의존성으로 가져올IgxForOfDirective 수도 있습니다.
// home.component.ts
import { IgxForOfDirective } from 'igniteui-angular/directives';
// import { IgxForOfDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<span #container>
<ng-template *igxFor="data"></ng-template>
</span>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxForOfDirective]
})
export class HomeComponent {
public data: Employee [];
}
이제 Ignite UI for Angular 트리 그리드 모듈이나 디렉티브를 가져왔으니, 디렉티브를igxFor 사용할 수 있습니다.
Using the Angular Virtual ForOf
모듈이나 디렉티브를 가져왔으니, 로컬 데이터에 바인딩하는 기본 구성igxFor부터 시작해 보겠습니다:
<span #container>
<ng-template *igxFor="data"></ng-template>
</span>
data 속성은 가상화된 DOM을 구성하는 데 사용되는 데이터 개체를 제공하는 배열입니다.
Examples
이igxFor 지시는 데이터를 수직, 수평 또는 양방향으로 가상화하는 데 사용할 수 있습니다.
가상화는 페이징과 유사하게 작동하며, 사용자가 데이터를 수평/수직으로 스크롤하는 동안 컨테이너 뷰포트에서 데이터를 더 작은 척으로 분할합니다. 페이징과의 차이점은 가상화가 스크롤바의 자연스러운 동작을 모방한다는 점입니다. 지시는igxFor 스크롤 가능한 컨테이너를 만들고 데이터의 작은 조각을 렌더링하는 것입니다. 이 도구는 내부igxGrid에서 사용되며 가상igx-list 구축에도 사용할 수 있습니다.
Vertical virtualization
<igx-list>
<div [style.height]="'500px'" [style.overflow]="'hidden'" [style.position]="'relative'">
<igx-list-item [style.width]="'calc(100% - 18px)'"
*igxFor="let item of data | igxFilter: fo;
scrollOrientation : 'vertical';
containerSize: '500px';
itemSize: '50px'">
<div class="contact">
<span class="name">{{item.name}}</span>
</div>
</igx-list-item>
</div>
</igx-list>
참고: 템플릿의igxForOf 상위 컨테이너에 다음과 같은 CSS 규칙이 적용되어야 합니다:height 수직 및width 수평overflow: hidden 규칙, 그리고position: relative. 이는 부드러운 스크롤 동작이 콘텐츠 오프셋을 통해 이루어지기 때문이며, 이 오프셋이 보이면 페이지의 다른 부분에 시각적으로 영향을 줄 수 있기 때문입니다.
Horizontal virtualization
<igx-list>
<div [style.width]="'880px'" [style.overflow]="'hidden'" [style.position]="'relative'">
<igx-list-item [style.width]="'220px'"
*igxFor="let item of data | igxFilter: fo;
scrollOrientation : 'horizontal';
containerSize: '880px';
itemSize: '220px'">
<div class="contact">
<span class="name">{{item.name}}</span>
</div>
</igx-list-item>
</div>
</igx-list>
Horizontal and vertical virtualization
<table #container [style.width]='width'
[style.height]='height'
[style.overflow]='"hidden"'
[style.position]='"relative"'>
<ng-template #scrollContainer igxFor let-rowData
[igxForOf]="data"
[igxForScrollOrientation]="'vertical'"
[igxForContainerSize]='height'
[igxForItemSize]='"50px"'>
<tr [style.display]="'flex'" [style.height]="'50px'">
<ng-template #childContainer igxFor let-col
[igxForOf]="cols"
[igxForScrollOrientation]="'horizontal'"
[igxForScrollContainer]="parentVirtDir"
[igxForContainerSize]='width'>
<td [style.min-width]='col.width + "px"'>
{{rowData[col.field]}}
</td>
</ng-template>
</tr>
</ng-template>
</table>
igxFor이 지시는 내부에서 수직 및 수평 방향igxGrid 모두에서 데이터를 가상화하는 데 사용됩니다.
자세한 정보와 데모를 보려면 그리드 가상화 주제를 따르십시오.
igxFor bound to remote service
igxForOf이 지시는 속성 -Observable(다음 경우)를 사용하여remoteData 원격 서비스에 바인딩할 수 있습니다.chunkLoading이 이벤트는 데이터 요청을 트리거하는 데에도 활용되어야 합니다.
<div style='height: 500px; overflow: hidden; position: relative;'>
<ng-template igxFor let-item [igxForOf]="remoteData | async"
(chunkPreload)="chunkLoading($event)"
[igxForScrollOrientation]="'vertical'"
[igxForContainerSize]='"500px"'
[igxForItemSize]='"50px"'
[igxForRemote]='true'
let-rowIndex="index" #virtDirRemote>
<div style='height:50px;'>{{item.ProductID}} : {{item.ProductName}}</div>
</ng-template>
</div>
참고:이 경우 속성을totalItemCount 설정igxForOf 해야 한다는 요구사항이 있습니다.
this.virtDirRemote.totalItemCount = data['@odata.count'];
컴포넌트에서 지시 인스턴스에 접근하려면 다음과 같이 표시ViewChild 해야 합니다:
@ViewChild('virtDirRemote', { read: IgxForOfDirective })
public virtDirRemote: IgxForOfDirective<any>;
첫 번째 청크를 로드하라는 요청 이후에는 다음을totalItemCount 설정할 수 있습니다:
public ngAfterViewInit() {
this.remoteService.getData(this.virtDirRemote.state, (data) => {
this.virtDirRemote.totalItemCount = data['@odata.count'];
});
}
데이터를 요청할 때는 와IgxForOfState 속성을 제공하는startIndex 인터페이스를 활용chunkSize 할 수 있습니다. 처음에는 chunkSize가 0이 되기 때문에, 첫 번째로 로드된 청크의 크기를 지정해야 합니다(가장 좋은 값은 초기igxForContainerSize 값과 나igxForItemSize 눈 값입니다).
public getData(data?: IForOfState, cb?: (any) => void): any {
var dataState = data;
return this.http
.get(this.buildUrl(dataState))
.map((response) => response.json())
.map((response) => {
return response;
})
.subscribe((data) => {
this._remoteData.next(data.value);
if (cb) {
cb(data);
}
});
}
private buildUrl(dataState: any): string {
let qS: string = '?', requiredChunkSize: number;
if (dataState) {
const skip = dataState.startIndex;
requiredChunkSize = dataState.chunkSize === 0 ?
// Set initial chunk size, the best value is igxForContainerSize
// initially divided by igxForItemSize
10 : dataState.chunkSize;
const top = requiredChunkSize;
qS += `$skip=${skip}&$top=${top}&$count=true`;
}
return `${this.url}${qS}`;
}
이벤트가chunkPreload 발생할 때마다 새로운 데이터 청크가 요청되어야 합니다:
chunkLoading(evt) {
if(this.prevRequest){
this.prevRequest.unsubscribe();
}
this.prevRequest = this.remoteService.getData(evt, ()=> {
this.virtDirRemote.cdr.detectChanges();
});
}
Local Variables
이 지침은igxFor 다음과 같은 헬퍼 속성을 포함합니다:evenodd,,first andlast. 이들은 컬렉션 내 현재 요소 위치를 식별하는 데 사용됩니다. 다음 코드 스니펫은 이 속성을even 어떻게 사용ng-template 하는지 보여줍니다. Аneven 클래스는 모든 짝수 div 요소에 할당됩니다:
<ng-template igxFor let-item let-isEven="even"
[igxForOf]="data"
[igxForScrollOrientation]="'vertical'" >
<div [ngClass]="{even: isEven}"></div>
</ng-template>
Known Limitations
| 한정 | 설명 |
|---|---|
scrollTo초기화 후 렌더링된 템플릿의 콘텐츠 크기가 변경되면 메서드가 올바르게 작동하지 않습니다. |
템플릿 내부 요소의 크기가 초기화 후 런타임을 변경하는 경우(예: 콘텐츠 프로젝션, 원격 요청 해결 등의 결과로)scrollTo 메소드는 올바른 인덱스로 스크롤할 수 없습니다. 메서드는 런타임 크기가 변경되기 전에 인덱스 위치로 스크롤하므로 나중에 크기가 변경된 후에는 위치가 정확하지 않습니다. 가능한 해결 방법은 콘텐츠가 나중에 로드되는 경우 콘텐츠에 따라 크기가 변경되지 않는 템플릿을 사용하는 것입니다. |
API References
Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://ko.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
GitHub