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深入。 以下任何一项都应该有效：

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

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

2. 使用ember-deep-tracked插件：

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

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

Answer 2

如果数组元素之一发生更改，则不会自动跟踪数组。 你不能这样做：

this.displayedArray.push(object1);

但是，如果您更改整个数组，例如使用扩展运算符，它们会被跟踪：

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

或者最终您可以使用EmberArray ，请参阅https://guides.emberjs.com/release/in-depth-topics/autotracking-in-depth/#toc_arrays