Web Components Grid Live Data Updates

    La función Ignite UI for Web Components Actualizaciones de datos en tiempo real en Web Components cuadrícula se utiliza para habilitar actualizaciones en tiempo real o casi en tiempo real de los datos que se muestran dentro de la cuadrícula. Esto es extremadamente útil en aplicaciones donde los datos cambian constantemente, como rastreadores de bolsa, resultados deportivos en vivo o paneles de IoT (Internet de las cosas). Puede IgcGridComponent manejar miles de actualizaciones por segundo, sin dejar de responder a las interacciones del usuario.

    Web Components Ejemplo de actualización de datos en tiempo real

    En el ejemplo siguiente se muestra el rendimiento de la cuadrícula cuando todos los registros se actualizan varias veces por segundo. Utilice los controles de la interfaz de usuario para elegir el número de registros cargados y la frecuencia de las actualizaciones. Introduzca los mismos datos en el Gráfico de columnas para experimentar las potentes capacidades de gráficos de Ignite UI for Angular. El Chart botón mostrará los datos de Precios de categoría por región para las filas seleccionadas y el botón de Chart columna mostrará lo mismo para la fila actual.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Vinculación de datos y actualizaciones

    Un servicio proporciona datos al componente cuando se carga la página y cuando se utiliza el controlador deslizante para recuperar una cierta cantidad de registros. Mientras que en un escenario real los datos actualizados se consumirían desde el servicio, aquí los datos se actualizan en código. Esto se hace para mantener la demostración simple y enfocarse en su objetivo principal: demostrar el rendimiento de la red.

    <igc-grid id="grid1"></igc-grid>
html
    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;
}
typescript

    Un cambio en el valor del campo de datos o un cambio en el objeto de datos/referencia de recopilación de datos activará las canalizaciones correspondientes. Sin embargo, este no es el caso de las columnas, que están vinculadas a objetos de datos complejos. Para resolver la situación, proporcione una nueva referencia de objeto para el objeto de datos que contiene la propiedad. Ejemplo:

    <igc-grid id="grid1">
    <igc-column field="price.usd"></igc-column>
</igc-grid>
html
    private updateData(data: any[]) {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    this.grid.data = newData;
}
typescript
    Ignite UI for Web Components | CTA Banner

    Plantillas

    La actualización de la vista funciona de la misma manera para columnas con una plantilla predeterminada y para columnas con una plantilla personalizada. Sin embargo, se recomienda mantener las plantillas personalizadas relativamente simples. A medida que crece el número de elementos en la plantilla, también aumenta el impacto negativo en el rendimiento.

    Referencias de API

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.