使用Typesript时，Angular UI网格树视图存在问题 [英] Issue with Angular UI grid Tree View when working with Typesript

问题描述

下面是使用ui-grid-tree-view的通常的angularJS html示例，该示例可以正确呈现.

 < div id ="grid1" ui-grid ="gridOptions" ui-grid-tree-view class ="grid"> 

将代码转换为打字稿时，不会呈现ui-grid-tree-view指令，即使未达到指令中的pre函数.

对于打字稿代码，"gridOptions"已作为公共变量添加到控制器类.相关代码示例:

 导出类MyController {构造函数(){this.gridOptions = {columnDefs:[{name:'Name'，width:'15％'}，{name:'Description'，width:'15％'}，{name:'IsActive'，cellTemplate:'< ul ng-if ="row.entity.IsActive == true"< li style ="color:green"</li></ul>;< ul ng-if ="row.entity.IsActive == false">< li style ="color:red"></li></ul>'，宽度:'10％'}]}}} 

使用递归函数创建树视图所需的dataArray.在HTML中使用:

 < div ng-controller ="MyController as ctrl"< div id ="grid1" ui-grid ="ctrl.gridOptions" ui-grid-tree-view class ="grid"></div></div> 

欢迎提出任何建议.

解决方案

我认为是我的团队成员之一问了这个问题.

在角度依赖项列表中添加 ui.grid.treeView 的依赖项后，此问题已解决.

推荐的部分是示例中未包括的部分.最后，为了澄清一下，这是打字稿的角度为1.

Below is a usual angularJS html sample using ui-grid-tree-view, which renders properly.

<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid">

when converting the code to typescript, ui-grid-tree-view directive is not rendering, even the pre function in the directive is not being reached.

For typescript code, "gridOptions" is being added as a public var to the controller class. Relevant code sample:

export class MyController{
    constructor(){
        this.gridOptions = {
            columnDefs: [
                { name: 'Name', width: '15%' },
                { name: 'Description', width: '15%' },
                { name: 'IsActive', cellTemplate: '<ul ng-if="row.entity.IsActive == true"><li style="color:green"></li></ul><ul ng-if="row.entity.IsActive== false"><li style="color:red"></li></ul>', width: '10%' }
            ]
        }
    }
}

Created the required dataArray for tree view using a recursion function. Using in HTML:

<div ng-controller="MyController as ctrl"
    <div id="grid1" ui-grid="ctrl.gridOptions" ui-grid-tree-view class="grid"></div>
</div>

Any suggestions are welcome.

解决方案

I think it was one of my team members who asked this question.. sorry for coming back late.

The issue was resolved after adding the dependency for ui.grid.treeView in the angular dependency list.

The portions which @oded recommended are the ones which are not included here in the sample. Lastly, just to clarify, this is angular 1 to typescript.

这篇关于使用Typesript时，Angular UI网格树视图存在问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！