修改 BehaviorSubject 数组中的深层嵌套对象

Question

我正在 angular 中构建应用程序。我的服务 DocumentService 包含一个 BehaviorSubject 文档数组。

documents: BehaviorSubject<Document[]>

这里是类的定义：

class Document {
  name: string
  files: File[];
}

class File {
  pages: Page[];
}

class Page {
  data: any;
  scale: number;
}

我的问题是，在页面中更新比例属性的最佳方法是什么？为此，我必须进入文档，进入文件，然后进入页面进行修改。但是，我不能就地修改它，因为我必须使用 this.documents.next(newDocumentsArray)。问题是，深度复制不起作用 - JSON.parse(JSON.stringify(...)) 给我一个循环结构错误，而其他方法（.map、Object.assign、...）只给我浅拷贝然后就地修改页面，这是我们做不到的。

有什么建议吗？谢谢

Answer 1

如果您希望保留当前的深层结构，则需要向下钻取：

const newDocs = oldDocs.map(doc => {
  if (doc !== docToChange) {
    return doc;
  } else {
    return {
      ...doc,
      files: doc.files.map(file => ({
        ...file,
        pages: file.pages.map(page => {
          // do page change here
        })
      }))
    };
  }
});

我建议切换到平面 Entity-like 结构，其中所有文档、文件和页面都按唯一 ID 存储在单独的词典中，文档的 files 数组包含 ID它的文件，与引用其页面的文件相同。这有意义吗？

修改 BehaviorSubject 数组中的深层嵌套对象

Modifying deeply nested object inside of a BehaviorSubject array

javascript

rxjs

typescript

angular