0

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

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()并确认它按预期运行并将跟踪变量设置为两个对象的数组。

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

//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 没有显示这个？

4

1 回答 1

1

对象在 Octane 中并不@tracked深入。以下任何一项都应该起作用：

  1. 将数组变量设置为新值，而不是改变现有数组：
this.displayedArray = [...this.displayedArray, object1, object2];
  1. 使用ember-deep-tracked插件：
import { tracked } from 'ember-deep-tracked';

export default class ControllerName extends Controller {
  @tracked displayedArray = new Array();
}
于 2021-10-14T21:30:55.427 回答