Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/visual-studio-2008/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 如何使用mobx声明一个计算getter,它是可观察列表的集合_Angular_Mobx - Fatal编程技术网

Angular 如何使用mobx声明一个计算getter,它是可观察列表的集合

Angular 如何使用mobx声明一个计算getter,它是可观察列表的集合,angular,mobx,Angular,Mobx,我有一个projects=>task\u list=>tasks的类层次结构,每个数组都是@observable的。现在我想从项目中创建一个“@computed get allTasks”,它聚合项目所有任务列表中的所有任务 class MsiTask { @observable name:string; constructor () {.... }; } class MsiTaskList { @observable tasks:MsiTask[]; const

我有一个projects=>task\u list=>tasks的类层次结构,每个数组都是@observable的。现在我想从项目中创建一个“@computed get allTasks”,它聚合项目所有任务列表中的所有任务

class MsiTask {
    @observable name:string;
    constructor () {.... };
}
class MsiTaskList {
    @observable tasks:MsiTask[];
    constructor () {.... };
}

class MsiProject {
            id:string;
            @observable name:string;
            @observable taskLists:MsiTaskList[]=[];

            constructor (data) {
                    $log.debug ('Constructing a Project with', data, this);

                    this.id = data.id;
                    this.name = data.name;

                    ProjectCache[this.id] = this;

                    /** Can I do reassign taskLists or should I fill it? **/
                    this.taskLists = lodash.map (data.taskLists || [], (taskList) => {
                            return new MsiTaskList (taskList, this);
                    });


            }

            createTaskList (title:string) : MsiTaskList {
                    let taskList = new MsiTaskList ({ name: title, id: MsiUtils.uuid() }, this);
                    $log.debug ('add task list', title, taskList);
                    this.taskLists.push (taskList);
                    return taskList;
            }

 }
我目前的定义如下:

在类MSI项目中

@computed get allTasks () : MsiTask[] {
   var arrayOfTasks = lodash.map(this.taskLists, 'tasks');
   var result = lodash.reduce(arrayOfTasks, (res, array) => {
         lodash.each (array, (it) => { res.push(it); });
         return res;
   }, []);
   return result; // tried also return observable.array (result);
 }
但在自定义组件中使用时,我遇到了摘要周期错误:

我知道allTasks每次都返回一个不同的数组,但我的想法是mobx会看到它的内容没有改变,也不会生成摘要循环


我完全不了解如何使用mobx吗?

请记住,
可观察。array
实现了整个数组API,但实际上不是隐藏的数组,因此最好使用内置的实用函数,而不是lodash。不要覆盖对数组的引用,而是使用

示例()


请将整个
MsiProject
类、组件和错误堆栈跟踪包括在内,好吗?谢谢@Tholle。我在MSI项目中添加了一些代码。在查看并重新阅读FAQ时,我突然想到我正在构造函数中重新分配this.taskLists,这可能就是问题所在。我应该把它填满。(我将不得不尝试,但因为我在程序中更改了代码)。你怎么认为?这就是问题所在。我应该用一个新的可见光来包裹它吗。那会弄糟装饰师吗?
class MsiTaskList {
  @observable tasks = [];
  constructor(tasks) {
    this.tasks.replace(tasks);
  }
}

class MsiProject {
  id = '';
  @observable name = '';
  @observable taskLists = [];

  constructor(id, name, taskLists) {
    this.id = id;
    this.name = name;
    const lists = taskLists.map(list => new MsiTaskList(list));
    this.taskLists.replace(lists);
  }

  @computed get allTasks() {
    return this.taskLists.reduce((result, list) => {
      list.tasks.forEach(task => result.push(task));
      return result;
    }, []);
  }
}