Angular Resumen virtual de la directiva ForOf
La directiva igxForOf Ignite UI for Angular es una alternativa a ngForOf para crear plantillas de grandes cantidades de datos. Utiliza la virtualización en segundo plano para optimizar el renderizado del DOM y el consumo de memoria.
Angular Virtual For Directive Example
Getting Started with Ignite UI for Angular Virtual ForOf Directive
Para empezar con la directiva Ignite UI for AngularigxFor, primero necesitas instalar Ignite UI for Angular. En una aplicación Angular existente, escribe el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importarlosIgxForOfModule en tu archivo 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 {}
Alternativamente,16.0.0 puedes importarlosIgxForOfDirective como una dependencia independiente.
// 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 [];
}
Ahora que tienes importado el módulo o directivas de Ignite UI for Angular Tree Grid, puedes empezar a usar laigxFor directiva.
Using the Angular Virtual ForOf
Ahora que tenemos el módulo o directiva importado, empecemos con una configuración básica de laigxFor que se vincula a datos locales:
<span #container>
<ng-template *igxFor="data"></ng-template>
</span>
La propiedad de datos es una matriz que proporciona los objetos de datos utilizados para construir el DOM virtualizado.
Examples
LaigxFor directiva puede usarse para virtualizar los datos en vertical, horizontal o en ambas direcciones.
La virtualización funciona de forma similar al paginación, dividiendo los datos en mandos más pequeños que se intercambian desde un viewport de contenedor mientras el usuario desplaza los datos horizontal o verticalmente. La diferencia con el paginación es que la virtualización imita el comportamiento natural de la barra de desplazamiento. LaigxFor directiva crea contenedores desplazables y renderiza pequeños fragmentos de los datos. Se utiliza dentro de yigxGrid puede usarse para construir un virtualigx-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>
Nota: Se recomienda encarecidamente que el contenedor padre de laigxForOf plantilla tenga aplicadas las siguientes reglas CSS:height para vertical ywidth para horizontal,overflow: hidden yposition: relative. Esto se debe a que el comportamiento de desplazamiento suave se logra mediante desplazamientos de contenido que podrían afectar visualmente a otras partes de la página si permanecen visibles.
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>
LaigxFor directiva se utiliza para virtualizar datos tanto en direcciones verticales como horizontales dentro de laigxGrid.
Siga el tema Virtualización de Grid para obtener información y demostraciones más detalladas.
igxFor bound to remote service
LaigxForOf directiva puede vincularse a un servicio remoto usando laObservable propiedad -remoteData(en el siguiente caso). ElchunkLoading evento también debe utilizarse para activar las solicitudes de datos.
<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>
Nota: Hay un requisito para establecer latotalItemCount propiedad en la instancia de.igxForOf
this.virtDirRemote.totalItemCount = data['@odata.count'];
Para acceder a la instancia directiva desde el componente, debe marcarse comoViewChild:
@ViewChild('virtDirRemote', { read: IgxForOfDirective })
public virtDirRemote: IgxForOfDirective<any>;
Tras la solicitud para cargar el primer bloque, se puedetotalItemCount establecer:
public ngAfterViewInit() {
this.remoteService.getData(this.virtDirRemote.state, (data) => {
this.virtDirRemote.totalItemCount = data['@odata.count'];
});
}
Al solicitar datos puedes aprovechar laIgxForOfState interfaz, que proporciona lasstartIndex propiedades ychunkSize. Ten en cuenta que inicialmente el chunkSize será 0, así que tienes que especificar el tamaño del primer chunk cargado (el mejor valor es la inicialigxForContainerSize dividida por eligxForItemSize).
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}`;
}
Cada vez que se lanza elchunkPreload evento, se debe solicitar un nuevo fragmento de datos:
chunkLoading(evt) {
if(this.prevRequest){
this.prevRequest.unsubscribe();
}
this.prevRequest = this.remoteService.getData(evt, ()=> {
this.virtDirRemote.cdr.detectChanges();
});
}
Local Variables
LaigxFor directiva incluye las siguientes propiedades auxiliares en su contexto:even,odd,first ylast. Se utilizan para identificar la posición actual de los elementos en la colección. El siguiente fragmento de código demuestra cómo usar laeven propiedad en unng-template. Unaeven clase se asignará a cada elemento par de div:
<ng-template igxFor let-item let-isEven="even"
[igxForOf]="data"
[igxForScrollOrientation]="'vertical'" >
<div [ngClass]="{even: isEven}"></div>
</ng-template>
Known Limitations
| Limitación | Descripción |
|---|---|
scrollToEl método no funciona correctamente cuando el tamaño del contenido de las plantillas renderizadas cambia después de la inicialización. |
Cuando los elementos dentro de la plantilla tienen un tamaño que cambia el tiempo de ejecución después de la inicialización (por ejemplo, como resultado de la proyección de contenido, la resolución remota de solicitudes, etc.), entonces elscrollTo El método no podrá desplazarse al índice correcto. El método se desplazará a la posición del índice antes de que se produzca el cambio de tamaño en tiempo de ejecución, por lo que la ubicación no será correcta después de que se cambie el tamaño más adelante. Una posible solución es utilizar plantillas que no cambien su tamaño según su contenido si el contenido se carga más tarde. |
API References
Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://es.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
GitHub