Ember Octane中Controller的Tracked数组为何无法在Template渲染？

核心原因 #

Ember的@tracked装饰器默认追踪的是变量的引用变更，不会自动监听数组、对象这类复杂类型内部的元素/属性变更。你调用push方法修改数组内容时，displayedArray本身的内存引用没有发生变化，因此Glimmer响应式系统检测不到变更，不会触发模板重渲染。
另外你测试时写的{{this.displayArray.length}}存在拼写错误，正确变量名是displayedArray，但哪怕修正拼写，也不会因为数组内部内容变化而更新长度数值。

两种可行解决方案 #

方案1：替换数组引用（轻量场景首选） #

每次修改数组后重新赋值为新的数组实例，主动触发@tracked的更新检测，不需要引入额外依赖：

@action
async setUpArray(){
  let object1 = {Key1:[1,2], Key2: [3,4]};
  let object2 = {Key1:[5,6], Key2: [7,8]};
  // 展开旧数组拼接新元素，生成新数组后赋值
  this.displayedArray = [...this.displayedArray, object1, object2];
}

其他数组操作也可以用相同思路处理：删除元素用filter返回新数组、修改元素用map返回新数组后重新赋值即可。

方案2：使用TrackedArray（高频数组操作场景首选） #

Ember官方提供了专门的响应式数组类TrackedArray，会自动监听内部元素的增删改操作，不需要每次手动替换引用：
首先导入依赖：

import { TrackedArray } from '@ember/tracking';

初始化时替换原生数组：

@tracked
displayedArray = TrackedArray.from([]);

修改数组的原有push代码不需要调整，直接调用就会自动触发响应式更新。

模板写法修正 #

你之前的模板调用语法也存在错误，正确写法如下：

• 取数组下标为0的元素：{{this.displayedArray.[0]}}
• 渲染所有数组元素建议用each循环：

{{#each this.displayedArray as |item index|}}
  <div>第{{index}}项：Key1值为{{item.Key1}}，Key2值为{{item.Key2}}</div>
{{/each}}

内容的提问来源于stack exchange，提问作者Sam Meehan