Web Components Tree Grid Live Data Updates

    Web Components 트리 그리드의 Ignite UI for Web Components Live Data Updates 기능은 그리드 내에 표시되는 데이터를 실시간 또는 거의 실시간으로 업데이트할 수 있도록 하는 데 사용됩니다. 이는 주식 시장 추적기, 실시간 스포츠 점수 또는 IoT(사물 인터넷) 대시보드와 같이 데이터가 지속적으로 변경되는 앱에서 매우 유용합니다. 이 IgcTreeGridComponent 초당 수천 건의 업데이트를 처리하는 동시에 사용자 상호 작용에 대한 응답성을 유지할 수 있습니다.

    Web Components 실시간 데이터 업데이트 예시

    아래 샘플은 모든 레코드가 초당 여러 번 업데이트될 때의 트리 그리드 성능을 보여줍니다. UI 컨트롤을 사용하여 로드되는 레코드 수와 업데이트 빈도를 선택합니다. 동일한 데이터를 기둥 차트에 입력하여 Ignite UI for Angular의 강력한 차트 기능을 경험하세요. Chart 버튼은 선택한 행에 대한 지역별 카테고리 가격을 표시하고 Chart 열 버튼은 현재 행에 대해 동일한 데이터를 표시합니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    데이터 바인딩 및 업데이트

    서비스는 페이지가 로드될 때와 슬라이더 컨트롤러를 사용하여 특정 수의 레코드를 가져올 때 구성 요소에 데이터를 제공합니다. 실제 시나리오에서는 업데이트된 데이터가 서비스에서 사용되지만 여기서는 데이터가 코드에서 업데이트됩니다. 이는 데모를 단순하게 유지하고 주요 목표인 그리드 성능 시연에 초점을 맞추기 위해 수행됩니다.

    <igc-tree-grid id="grid1"></igc-tree-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

    데이터 필드 값이 변경되거나 데이터 개체/데이터 수집 참조가 변경되면 해당 파이프가 트리거됩니다. 그러나 복잡한 데이터 개체에 바인딩된 열의 경우에는 그렇지 않습니다. 이 상황을 해결하려면 속성이 포함된 데이터 개체에 대한 새 개체 참조를 제공하십시오. 예:

    <igc-tree-grid id="grid1">
    <igc-column field="price.usd"></igc-column>
</igc-tree-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 배너

    템플릿

    보기 업데이트는 기본 템플릿이 있는 열과 사용자 정의 템플릿이 있는 열에 대해 동일한 방식으로 작동합니다. 그러나 사용자 정의 템플릿을 비교적 단순하게 유지하는 것이 좋습니다. 템플릿의 요소 수가 증가하면 성능에 부정적인 영향도 커집니다.

    API 참조

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.