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