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

【问题标题】：Angular 2 Lifecycle and VMware Clarity UI GridAngular 2 生命周期和 VMware Clarity UI 网格
【发布时间】：2017-03-27 18:38:13
【问题描述】：

我正在组件内部进行休息调用。我在 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>

休息调用后网格未对齐

点击标题排序后正确对齐

【问题讨论】：

有人吗？有什么建议吗？

标签： angular vmware vmware-clarity

【解决方案1】：

在我看来，这类似于以下两个问题之一：
https://github.com/vmware/clarity/issues/623
https://github.com/vmware/clarity/issues/817

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

【讨论】：

【解决方案2】：

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

【讨论】：