ThingsBoard自定义动态表格数据可视化组件的数组绑定与访问问题咨询

各位好，我最近在给ThingsBoard做一个自定义组件，用来可视化动态表格数据，过程中碰到了一些数组绑定和访问的问题，特意整理了一个最小可运行的例子来展示问题所在：

代码示例 #

JS 逻辑

self.ctx.$scope.showAlert = function() { 
    window.alert("my device"); 
}; 
self.ctx.$scope.var = [ 
    "id: 1, name: 'Batch A'", 
    "id: 2, name: 'Batch B'" 
]; 
self.ctx.$scope.datasourceData = []; 
self.ctx.detectChanges(); 
};

HTML 模板

<div class="mainCard"> 
    <h3>Hello World</h3> 
    <button mat-raised-button color="primary" (click)="showAlert()">Click me</button> 
    <p>{{ctx.$scope.var}}</p> 
    <ul> 
        <li ng-repeat="item in ctx.$scope.var"> Wert: {{item}} </li> 
    </ul> 
    <h3>Einzelne Werte</h3> 
    <p>Erster Wert: {{ctx.$scope.var}}</p> 
</div>

目前正常工作的点 #

• 点击“Click me”按钮能正常触发showAlert弹出提示框，功能没问题
• 直接在页面上渲染整个数组{{ctx.$scope.var}}可以正常显示数组内容

遇到的问题 #

• 尝试通过索引直接访问数组元素，比如写{{ctx.$scope.var[1]}}时，会抛出错误：Widget Error: can't access property 1, ctx.ctx.$scope.var is undefined
• 用ng-repeat循环遍历数组渲染列表项时，页面上完全看不到任何列表元素，可明明我已经在初始化方法里把数组设置好了

想问问大家，在ThingsBoard的自定义组件里，有没有规范的方法来处理动态数组的绑定和访问？尤其是需要用到ng-repeat或者直接索引取元素的场景，应该怎么操作才能避免这些问题呢？

内容来源于stack exchange