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

Question

我正在组件内部进行休息调用。我在clr-datagrid中渲染数据。首次渲染时，数据会偏斜并且不对齐。如果我对数据进行排序，或对网格执行任何操作，则数据会正确对齐。我假设这是由于网格没有及时的所有数据来计算正确的列宽。我正在构造函数内部进行REST调用，尽管我也尝试将其移入ngOnInit（）函数而没有任何改进。

组件中REST调用的推荐位置在哪里？一旦数据被正确返回，我需要调用什么来使UI在宽度上“刷新”它的计算？

因为此代码正在对内部服务器进行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>

在进行休息呼叫后未对齐网格

点击标题排序后正确对齐

Answer 1

这在我看来就像这两个问题中的一个：
https://github.com/vmware/clarity/issues/623
https://github.com/vmware/clarity/issues/817

两者都已作为Clarity 0.9.14的一部分得到解决。你使用的是哪个版本？如果它是更高版本，您是否可以在一个plunker上重现您的用例并在Clarity's GitHub?上查找错误。谢谢！  预期的行为是，只有在数据准备好后才会计算列宽。

Answer 2

检查控制台是否有javascript错误。我发现在使用datagrid的时候，如果数据还没有完全加载，你可能正在访问一个属性或一个不存在的对象的函数。这将抛出一个错误，数据网格似乎停止导致倾斜。也许用某些东西初始化你的数据字段（即使是空的）以避免这些错误。