1

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

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

单击标题排序后正确对齐 单击标题排序后正确对齐

4

2 回答 2

3

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

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

于 2017-08-17T13:58:40.187 回答
0

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

于 2017-07-06T13:34:37.697 回答