Web Components Grid Live Data Updates

    O recurso Ignite UI for Web Components Atualizações de dados em tempo real no Web Components Grid é usado para habilitar atualizações em tempo real ou quase em tempo real dos dados exibidos na grade. Isso é extremamente útil em aplicativos em que os dados estão em constante mudança, como rastreadores do mercado de ações, resultados esportivos ao vivo ou painéis de IoT (Internet das Coisas). Eles IgcGridComponent podem lidar com milhares de atualizações por segundo, mantendo-se responsivos às interações do usuário.

    Web Components Live-data Update Example

    O exemplo abaixo demonstra o desempenho do Grid quando todos os registros são atualizados várias vezes por segundo. Use os controles da interface do usuário para escolher o número de registros carregados e a frequência das atualizações. Alimente os mesmos dados no gráfico de colunas para experimentar os poderosos recursos de gráficos do Ignite UI for Angular. O Chart botão mostrará os dados de Preços de categoria por região para as linhas selecionadas e o Chart botão de coluna mostrará o mesmo para a linha atual.

    Data binding and updates

    Um serviço fornece dados ao componente quando a página é carregada e quando o controlador deslizante é usado para buscar um determinado número de registros. Enquanto em um cenário real os dados atualizados seriam consumidos do serviço, aqui os dados são atualizados no código. Isso é feito para manter a demonstração simples e focar em seu objetivo principal - demonstrar o desempenho da grade.

    <igc-grid id="grid1"></igc-grid>

    public startUpdate() {
    const frequency = (document.getElementById('frequency') as IgcSliderComponent).value;
    this._timer = setInterval(() => {
        this.grid1.data = FinancialData.updateAllPrices(this.data);
    }, frequency);
    (document.getElementById('startButton') as IgcButtonComponent).disabled = true;
    (document.getElementById('stopButton') as IgcButtonComponent).disabled = false;
    (document.getElementById('chartButton') as IgcButtonComponent).disabled = true;
}

    Uma alteração no valor do campo de dados ou uma alteração no objeto de dados/referência de coleta de dados acionará os pipes correspondentes. No entanto, esse não é o caso de colunas, que são associadas a objetos de dados complexos. Para resolver a situação, forneça uma nova referência de objeto para o objeto de dados que contém a propriedade. Exemplo:

    <igc-grid id="grid1">
    <igc-column field="price.usd"></igc-column>
</igc-grid>

    private updateData(data: any[]) {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    this.grid.data = newData;
}

    Modelos

    A atualização do modo de exibição funciona da mesma maneira para colunas com um modelo padrão e para colunas com um modelo personalizado. No entanto, é recomendável manter os modelos personalizados relativamente simples. À medida que o número de elementos no modelo aumenta, o impacto negativo no desempenho também aumenta.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.