javascript - Ignite UI TreeList 绑定(bind)两个名称和值

标签 javascript angular typescript ignite-ui igtree

我基于此IgniteUI创建了一个拖放树列表教程。树列表工作得很好,但问题出在 child 身上。如图所示,我的子项未定义

enter image description here

这是我的 ts 代码:

this.options = {
  checkboxMode: 'triState',
  singleBranchExpand: true,
  dataSource: jQuery.extend(true, [], this.ServiceCounterPointRelations),
  dataSourceType: 'json',
  initialExpandDepth: 2,
  pathSeparator: '.',
  bindings: {
    textKey: 'ServiceCounter',
    valueKey: 'ServiceCounterId',
    childDataProperty: 'ServicePoints'
  },
  dragAndDrop: true,
  dragAndDropSettings: {
    allowDrop: true,
    customDropValidation: function (element) {
      var valid = true,
        droppableNode = jQuery(this);
      if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
        valid = false;
      }

      return valid;
    }
  }
};

this.ServiceCounterPointRelations 包含以下 json

"ServiceCounterPointRelations": [
    {
        "ServiceCounterId": 2,
        "ServiceCounter": "Main Counter",
        "ServicePoints": [
            {
                "ServicePointId": 2,
                "ServicePoint": "Service Point 1"
            }
        ]
    },
    {
        "ServiceCounterId": 3,
        "ServiceCounter": "Counter 1",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 4,
        "ServiceCounter": "Test for 2",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 5,
        "ServiceCounter": "ASD",
        "ServicePoints": [
            {
                "ServicePointId": 1,
                "ServicePoint": "DER"
            },
            {
                "ServicePointId": 3,
                "ServicePoint": "ER"
            }
        ]
    },
    {
        "ServiceCounterId": 6,
        "ServiceCounter": "ASD",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 7,
        "ServiceCounter": "EEE",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 8,
        "ServiceCounter": "With New Tog",
        "ServicePoints": []
    }
]

我发现了问题,但仍在寻找解决方案。问题是我仅将父 textKey 绑定(bind)为“ServiceCounter”,将 valueKey 绑定(bind)为“ServiceCounterId”。但 child 有不同的textKey和valueKey。我不知道该怎么做。任何意见将是有益的。谢谢。

最佳答案

子绑定(bind)以分层方式定义。在您的示例中,唯一的绑定(bind)层是顶部数据层,因此树正在寻找与顶部数据层中相同的文本和值键。定义方法如下:

bindings: {
    textKey: 'ServiceCounter',
    valueKey: 'ServiceCounterId',
    childDataProperty: 'ServicePoints',
    bindings: {
        textKey: 'ServicePoint',
        valueKey: 'ServicePointId'
    }
},

关于javascript - Ignite UI TreeList 绑定(bind)两个名称和值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40945555/

相关文章:

javascript - 向 OneSignal 推送通知发送 POST 请求

javascript - 适用于 Javascript 的 Onelogin SAML 工具包

angular - 在 Angular 5 http 请求中使用 observable 有什么好处?

angular - 将 Angular 项目的 ARM 部署到 Azure Web 应用程序

javascript - 如何从 index.js 获取 TS 文件?

javascript - 无法发送异步 POST 请求

javascript - 搜索对象数组中的所有值

javascript - 如何对包含 HTML 字符的 JSON 字符串进行编码?

为输入字段选择浏览器建议时,Angular Pipe 不起作用

angular - NullInjectorError : No provider for InjectionToken angularfire2. 应用程序选项