Question

我使用的是primeng网站上的相同示例代码。

<div class="col-md-9 col-md-push-3 bordered tableScroll boxSize">

    <table class="centerTree">
        <p-tree [value]="files" layout="horizontal" [selectionMode]="single"></p-tree>
    </table>

</div>

在我的服务中，我有以下内容：

@Injectable()
export class NodeService {

    constructor(private http: Http) {}

    getFiles() {
        return this.http.get('data.json')
            .toPromise()
            .then(res => <TreeNode[]> res.json().data)
            .then(data => { return data; });
    }
}

我还从网站上复制并粘贴了相同的JSON。当我检查我在CSS中看到的网站时，它有一个名为p-treeNode的变量，所以我想也许这就是问题所以我试图覆盖它：

p-treeNode {
    height: 400px;
    width: 400%;
    color: red;
}

没有任何改变我使用以下作为示例PrimeNg Site

----------------------------更新1 ----------------- --------

通过执行以下操作，我能够获得所有JSON渲染：

ngOnInit() {
        this.nodeService.getFiles().then(files => {
            this.files = [{
                label: 'Root',
                children: files
            }];
        });
    }

我错过了这个label: 'Root', children: files

然而它仍然非常小，看起来不像网站。

Answer 1

尝试添加

：host / deep / .ui-tree {width：100％; }

到你的组件css文件。

我的所有json都没有渲染，容器也没有展开

1 个答案: