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

Question

I am trying to render access the contents of an array stored in the controller from within the template. The array starts empty but objects are added to it using a method in the controller:

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);
  }
}

I am able to call setUpArray() from the template and have confirmed it is running as expected and producing setting the tracked variable to an array of the two objects.

However I do not seem to be able to display anything relating to displayedArray in the template. I have tried the following:

//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}}

As far as I can tell the issue only happens with arrays or at least arrays containing objects. I am able to display strings or other tracked variables set up in the controller just fine.

Does anyone know why Ember is failing to display this?

Answer 1

Objects are not @tracked deeply in Octane. Either one of the following should work:

1. Set the array variable to new value instead of mutating existing array:

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

2. Use ember-deep-tracked addon:

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

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