Question

我有一个从Web服务检索的对象的集合，每个对象都有自己的子代集合。每个孩子又有零个或一个孙子孙，像这样：

def __str__(self):
    return self.libelle_filiere

我有一个读取事物并返回Observable的服务。这对我来说有点新意，但是我相信这实际上是一堆事物对象？

在html模板中，我可以轻松地为每个项目显示基本属性：

[{"id":"1","name":"bob", "children":[
    {"id":"17","grandchildren":{"id":122,"number":47,}, 
    {"id":"18","grandchildren":[]}, 
    {"id":"19","grandchildren":[{"id":123,"number":47.5,}]
    ], 
.
.
.
]

棘手的一点是，对于每件事，我需要显示所有孙子的“数字”字段的总和。我已经尝试了几种非常混乱的方法来完成此操作并失败了，是否有一种很好的角度方法可以做到这一点？

======编辑======

感谢Dragos Andrei和ilyas shabi，我采用了Dragos的出色功能并将其放入Ilyas出色的StackBlitz模板的分支中，以保持管道布局。

分叉模板在这里：

https://stackblitz.com/edit/angular-stackoverflow-56701060-2z543f

Answer 1

这样的帮助吗？

component.ts代码：

reduce

component.html代码：

getNumberOfChildren(thing: { id: number; children: any[] } ){
  return thing.children.filter(c=> !!c.grandchildren && c.grandchildren.length > 0).length;
}

关闭主题，我建议您习惯于在* ngFor中使用trackBy。您可以在这里阅读有关该现象的更多信息：https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

Answer 2

我在stackBlitz上创建了一个project，您可以在app.component.ts文件上编辑事物对象，看看这是否真的是您想要的。

希望这对您有用

Answer 3

那现在呢？

  getNumberOfChildren(thing: {
    id?: string;
    children?: Array<{
      id?: string;
      grandchildren?: Array<{ id?: string; number?: number }>;
    }>;
  }) {
    return thing.children
      .filter(c => c.grandchildren && c.grandchildren.length > 0)
      .map(c => c.grandchildren.map(g => g.number).reduce((a, b) => a + b))
      .reduce((a, b) => a + b);
  }

在子对象中显示列总和的最佳方法

3 个答案: