Angular 2生命周期和VMware Clarity UI网格

Question

I'm making a rest call inside of a component. I'm rendering the data in a clr-datagrid. When it is first rendered, the data is skewed and misaligned. If I sort the data, or do anything on the grid, the data becomes properly aligned. I'm assuming this is due to the grid not having all of the data in time to calculate the proper column widths. I'm making the REST call inside of the constructor, though I've also tried moving this into the ngOnInit() function with no improvement.

Where is the recommended location for a REST call in a component? Once the data is properly returned, is there something I need to call to cause the UI to "refresh" it calculations on widths?

Because this code is making a REST call to an internal server, I am unable to provide a Plunker reproducing it.

Component code:

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 Code

<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

Aligned properly after clicking header sort

Answer 1

This looks to me like one of these two issues:
https://github.com/vmware/clarity/issues/623
https://github.com/vmware/clarity/issues/817

Both have been solved as part of Clarity 0.9.14. Which version are you using? If it's a later version, could you reproduce your use case on a plunker and file for a bug on Clarity's GitHub? . Thanks! The expected behavior is that column widths are only calculated once the data is ready.

Answer 2

Check the console for javascript errors. I have found when using the datagrid if the data isnt fully loaded yet, you are probably accessing a property or a function of an object that doesnt exist. This will throw an error which the datagrid seems to halt on causing the skewing. Maybe initialize your data fields with somethings (even if empty) to avoid these errors.