Ember Octane - 在模板中显示来自控制器的跟踪阵列的内容？

Question

我正在尝试从模板中呈现对存储在控制器中的数组内容的访问。该数组开始为空，但使用控制器中的方法将对象添加到其中：

import Controller from '@ember/controller';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';

export default class ControllerName extends Controller {

  @tracked
  displayedArray = new Array();

  @action
  async setUpArray(){
    let object1 = {Key1:[1,2], Key2: [3,4]};
    let object2 = {Key1:[5,6], Key2: [7,8]};
    this.displayedArray.push(object1);
    this.displayedArray.push(object2);
  }
}

我可以从模板中调用 setUpArray() 并确认它是运行并生成将跟踪变量设置为两个数组的数组对象。

但是我似乎无法在模板中显示与 displayedArray 相关的任何内容。我尝试了以下方法：

//Returns blank - I expected [object,object]
{{this.displayedArray}}

//Returns blank
{{this.displayedArray 0}}

//Returns 0 before and after the *setUpArray()* function is called
{{this.displayArray.length}}

据我所知，这个问题只发生在数组或至少包含对象的数组上。我能够很好地显示在控制器中设置的字符串或其他跟踪变量。

有人知道为什么 Ember 无法显示吗？

Answer 1

对象在 Octane 中并不 @tracked 很深。以下任何一项都应该有效：

将数组变量设置为新值而不是改变现有数组：

this.displayedArray = [...this.displayedArray, object1, object2];

使用ember-deep-tracked插件：

import { tracked } from 'ember-deep-tracked';

export default class ControllerName extends Controller {
  @tracked displayedArray = new Array();
}

Ember Octane - 在模板中显示来自控制器的跟踪阵列的内容？

Ember Octane - Display contents of a Tracked Array from Controller in Template?

templates

ember.js

ember-controllers

ember-octane