Жизненный цикл Angular 2 и VMware Clarity UI Grid

Я делаю вызов отдыха внутри компонента. Я визуализирую данные в clr-datagrid. При первом рендеринге данные искажены и смещены. Если я отсортирую данные или сделаю что-нибудь в сетке, данные будут правильно выровнены. Я предполагаю, что это связано с тем, что сетка не имеет всех данных вовремя для расчета правильной ширины столбцов. Я выполняю вызов REST внутри конструктора, хотя я также попытался перенести это в функцию ngOnInit () без каких-либо улучшений.

Где в компоненте рекомендуется использовать REST-вызов? После того, как данные будут возвращены должным образом, нужно ли что-то вызвать, чтобы пользовательский интерфейс «обновил» вычисления ширины?

Поскольку этот код выполняет вызов REST на внутренний сервер, я не могу предоставить Plunker, воспроизводящий его.

Код компонента:

export class NodesComponent implements OnInit {

nodes: Node[] = [];
currentNode: Node;

constructor(private dataService: DataService) {
    this.dataService.getNodes().subscribe(nodesAsJson => {
        for (let nodeAsJson of nodesAsJson) {
            let node: Node = new Node(nodeAsJson);
            this.nodes.push(node);
        }
    });
}

HTML-код

<h4><clr-icon shape="server" size="24"></clr-icon>Nodes ({{ nodes.length }})</h4>
<clr-datagrid>
    <clr-dg-column [clrDgField] = "'id'">ID</clr-dg-column>
    <clr-dg-column [clrDgField] = "'name'">Name</clr-dg-column>
    <clr-dg-column [clrDgField] = "'type'">Type</clr-dg-column>

    <clr-dg-row *clrDgItems="let node of nodes">
        <clr-dg-cell>{{ node.id }}</clr-dg-cell>
        <clr-dg-cell>{{ node.name }}</clr-dg-cell>
        <clr-dg-cell>{{ node.type }}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        {{pagination1.firstItem + 1}} - {{pagination1.lastItem + 1}} of     {{pagination1.totalItems}} Nodes
        <clr-dg-pagination #pagination1 [clrDgPageSize]="5"></clr-dg-pagination>
</clr-dg-footer>

Misaligned Grid after rest call is made

Правильно выровнено после нажатия кнопки сортировки заголовков