53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
DoCheck,
|
|
NgZone,
|
|
OnInit,
|
|
} from '@angular/core';
|
|
import { Parent } from '../types';
|
|
import { WorkerService } from '../worker.service';
|
|
|
|
@Component({
|
|
selector: 'app-table',
|
|
templateUrl: './table.component.html',
|
|
styleUrls: ['./table.component.css'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class TableComponent implements OnInit {
|
|
public itemsToShow: Array<Parent> = [];
|
|
|
|
constructor(
|
|
private readonly workerService: WorkerService,
|
|
private readonly ngZone: NgZone,
|
|
private readonly changeDetectorRef: ChangeDetectorRef,
|
|
) {
|
|
this.changeDetectorRef.detach();
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
const fn = (event: MessageEvent) => {
|
|
this.ngZone.runOutsideAngular(
|
|
() => {
|
|
const itemsToShow: Array<Parent> = event.data.slice(-10);
|
|
|
|
this.ngZone.run(
|
|
() => {
|
|
this.itemsToShow = itemsToShow;
|
|
this.changeDetectorRef.detectChanges();
|
|
},
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
this.workerService.connect(fn.bind(this));
|
|
}
|
|
|
|
// Sort of useless because of too random data :)
|
|
public trackByFn(index: number, item: Parent) {
|
|
return `${item.id}${item.int}${item.float}${item.color}${item.child.id}${item.child.color}`;
|
|
}
|
|
}
|