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

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?

CodePudding user response：

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

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

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

Use ember-deep-tracked addon:

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

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

CodePudding user response：

Arrays are not automatically tracked if one of their element change. You cannot do:

this.displayedArray.push(object1);

But they get tracked if you change the whole array, using the spread operator for example:

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

Or eventually you can use EmberArray, see https://guides.emberjs.com/release/in-depth-topics/autotracking-in-depth/#toc_arrays