Angular Grid 실시간 데이터 업데이트

    그리드 구성 요소는 사용자 상호 작용에 대한 응답성을 유지하면서 초당 수천 개의 업데이트를 처리할 수 있습니다.

    Angular Live-data Update Example

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

    Data binding and updates

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

    <igx-grid #grid [data]="data"></igx-grid>

    public ngOnInit() {
    this.localService.getData(this.volume);
    this.volumeSlider.onValueChange.subscribe(x => this.localService.getData(this.volume);
    this.localService.records.subscribe(x => { this.data = x; });
}

    Angular 파이프는 내부적으로 그리드 보기를 업데이트하는 데 사용됩니다. 데이터 필드 값이 변경되거나 데이터 개체/데이터 수집 참조가 변경되면 해당 파이프가 트리거됩니다. 그러나 complex data objects에 바인딩된 열의 경우에는 해당되지 않습니다. 왜냐하면 Angular 순수 파이프는 중첩된 속성의 변경 사항을 감지하지 못하기 때문입니다. 이 상황을 해결하려면 속성이 포함된 데이터 개체에 대한 새 개체 참조를 제공하십시오. 예:

    <igx-grid #grid [data]="data">
    <igx-column field="price.usd"></igx-column>
</igx-grid>

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

    템플릿

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

    Live-data feed with Dock Manager and igxGrid Components

    이 데모의 목적은 SignalR 허브 백엔드를 사용하여 실시간 데이터 스트림이 포함된 금융 스크린 보드를 선보이는 것입니다. 보시다시피 igxGrid 구성 요소는 서버의 고주파수 업데이트를 쉽게 처리합니다. SignalR을 사용하는 ASP.NET Core 애플리케이션의 코드는 이 공개 GitHub 리포지토리에서 찾을 수 있습니다.

    Start the hub connection

    signal-r.service는 노출된 관리 가능한 매개변수인 주파수, 볼륨 및 실시간 업데이트 상태 토글 (시작/중지)의 연결 및 업데이트를 처리합니다.

    this.hubConnection = new signalR.HubConnectionBuilder()
        .configureLogging(signalR.LogLevel.Trace)
        .withUrl('https://ko.infragistics.com/angular-apis/webapi/streamHub')
        .build();
    this.hubConnection
        .start()
        .then(() => {
            this.hasRemoteConnection = true;
            this.registerSignalEvents();
            this.broadcastParams(interval, volume, live, updateAll);
        })
        .catch(() => {});

    지정된 빈도에 따라 총 30개의 새로운 업데이트가 서버로부터 그리드에 수신됩니다. 변경 사항(가격, 변경 사항 및 백분율 변경 사항)을 처리하는 세 개의 열에 특정 cellStyle 클래스가 적용됩니다.

    Update frequency and data volume

    왼쪽의 액션 패널을 사용하면 데이터 피드의 빈도와 요청된 데이터의 양을 관리할 수 있습니다. 모든 그리드는 동일한 데이터 소스를 사용합니다. 데이터 피드를 중지하거나​ ​애플리케이션 테마를 변경하거나 igxGrid를 사용하여 DockSlot 컨테이너를 동적으로 추가하려면 다른 작업 요소를 자유롭게 사용하세요.

    우리는 특정 빈도로 새로운 데이터 세트를 요청하기 위해 'updateparameters' 메소드를 사용합니다. 이 메서드는 SignalR 스트림 허브 구현의 일부입니다.

    this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll)
    .then(() => console.log('requestLiveData', volume))
    .catch(err => {
        console.error(err);
    });

    Dynamically create DockSlot and Grid components

    ​ComponentFactoryResolver를 사용하면 DockSlot 및 Grid 구성 요소를 즉시 생성할 수 있습니다.

    DockManager component

    ​Dock Manager WebComponent를 활용하고 Docket이나 부동 패널을 사용하여 자신만의 웹 보기를 구축하세요. 새 부동 패널을 추가하려면 오른쪽에 있는 작업 창을 열고 '부동 창 추가' 버튼을 클릭하세요. 원하는 위치에 새 창을 끌어다 놓습니다.

    API References

    Additional Resources

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