Visão geral da diretiva Angular Virtual ForOf

A diretiva igxForOf Ignite UI for Angular é uma alternativa ao ngForOf para criar modelos de grandes quantidades de dados. Ela usa virtualização nos bastidores para otimizar a renderização do DOM e o consumo de memória.

Angular Virtual For Directive Example

Getting Started with Ignite UI for Angular Virtual ForOf Directive

Para começar com a diretiva Ignite UI for AngularigxFor, primeiro você precisa instalar Ignite UI for Angular. Em uma aplicação Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar issoIgxForOfModule no seu arquivo 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 você pode importar comoIgxForOfDirective uma dependência independente.

// 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 [];
}

Agora que você importou o módulo ou diretivas Ignite UI for Angular Tree Grid, pode começar a usar aigxFor diretiva.

Using the Angular Virtual ForOf

Agora que importamos o módulo ou diretiva, vamos começar com uma configuração básica doigxFor que se liga aos dados locais:

<span #container>
    <ng-template *igxFor="data"></ng-template>
</span>

A propriedade de dados é uma matriz que fornece os objetos de dados usados para construir o DOM virtualizado.

Examples

AigxFor diretiva pode ser usada para virtualizar os dados em direção vertical, horizontal ou em ambas as direções.

A virtualização funciona de forma semelhante ao Paginação, cortando os dados em blocos menores que são trocados a partir de uma viewport de contêiner enquanto o usuário rola os dados horizontalmente/verticalmente. A diferença com o Paging é que a virtualização imita o comportamento natural da barra de rolagem. AigxFor diretriz está criando contêineres roláveis e renderiza pequenos pedaços dos dados. Ele é usado dentro doigxGrid e pode ser usado para construir um 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: É fortemente recomendado que o contêiner-pai doigxForOf template tenha as seguintes regras CSS aplicadas:height para vertical ewidth para horizontal,overflow: hidden eposition: relative. Isso ocorre porque o comportamento de rolagem suave é alcançado por meio de deslocamentos de conteúdo que podem afetar visualmente outras partes da página se permanecerem visíveis.

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>

AigxFor diretiva é usada para virtualizar dados tanto na direção vertical quanto na horizontal dentro doigxGrid.

Siga o tópico Virtualização de grade para obter informações e demonstrações mais detalhadas.

igxFor bound to remote service

AigxForOf diretiva pode ser vinculada a um serviço remoto usando aObservable propriedade -remoteData(no caso seguinte). OchunkLoading evento também deve ser utilizado para acionar as solicitações de dados.

<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: Há um requisito para definir atotalItemCount propriedade na instância de.igxForOf​

this.virtDirRemote.totalItemCount = data['@odata.count'];

Para acessar a instância diretiva do componente, ela deve ser marcada comoViewChild:

@ViewChild('virtDirRemote', { read: IgxForOfDirective })
public virtDirRemote: IgxForOfDirective<any>;

Após a solicitação para carregar o primeiro bloco, ototalItemCount conjunto pode ser definido:

public ngAfterViewInit() {
    this.remoteService.getData(this.virtDirRemote.state, (data) => {
        this.virtDirRemote.totalItemCount = data['@odata.count'];
    });
}

Ao solicitar dados, você pode aproveitar aIgxForOfState interface, que fornece asstartIndex propriedades e.chunkSize Note que inicialmente o chunkSize será 0, então você precisa especificar o tamanho do primeiro chunk carregado (o melhor valor é a inicialigxForContainerSize dividida peloigxForItemSize o).

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 ochunkPreload evento é lançado, um novo pedaço de dados deve ser solicitado:

chunkLoading(evt) {
    if(this.prevRequest){
        this.prevRequest.unsubscribe();
     }
     this.prevRequest = this.remoteService.getData(evt, ()=> {
        this.virtDirRemote.cdr.detectChanges();
    });
}

Local Variables

AigxFor diretiva inclui as seguintes propriedades auxiliares em seu contexto:even,odd,efirst​last. Eles são usados para identificar a posição atual dos elementos na coleção. O seguinte trecho de código demonstra como usar aeven propriedade em umng-template. Umaeven classe será atribuída a cada elemento par da div:

<ng-template igxFor let-item let-isEven="even"
             [igxForOf]="data" 
             [igxForScrollOrientation]="'vertical'" >
    <div [ngClass]="{even: isEven}"></div>
</ng-template>

Known Limitations

Limitação

Descrição

scrollToo método não funciona corretamente quando o tamanho do conteúdo dos modelos renderizados muda após a inicialização

Quando os elementos dentro do modelo têm um tamanho que muda o tempo de execução após a inicialização (por exemplo, como resultado da projeção de conteúdo, resolução de solicitação remota etc.), então oscrollTo o método não conseguirá rolar para o índice correto. O método rolará para a posição do índice antes que a alteração do tamanho do tempo de execução ocorra, portanto, o local não estará correto depois que o tamanho for alterado posteriormente. Uma possível solução alternativa é usar modelos que não alterem seu tamanho com base em seu conteúdo se o conteúdo for carregado posteriormente.

API References

• Diretiva IgxForOfDirective
• Componente IgxGridIgx
• Componente de lista Igx

Additional Resources

Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://pt-br.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)