Angular 7 嵌套用于使用父值作为子索引

Question

是否可以在 Angular 2+ 中执行此操作？

假设我有以下对象：

 myParent = [{id: 1, code: 'code1', title: 'parentTitle1'}, {id: 2, code: 'code2', title: 'parentTitle2'}];
 myChild = {code1: [{id: 1, title: 'childTitle1'}, {id: 2, title: 'childTitle2'}], code2: [{id: 4, title: 'childTitle1'}]

我想迭代第一个，然后显示第二个的项目，使用父对象的 'code' 值作为索引：

<h3 *ngFor="let parent of myParent">{{parent .title}} 
  <br>
  <span *ngFor="let child of myChild[parent.code]"> {{child.title}} </span>
  <br>
</h3>

我在控制台上没有收到任何错误，但是子 'for' 没有显示任何内容。我曾经在 AngularJS 上这样做过，但不确定是否可以在 NG7

上这样做

Answer 1

检查此 stackblitz。这对你不起作用吗？

我试过这些数据：

  myParent = [{id: 1, code: 'code1', title: 'parentTitle1'}, {id: 2, code: 'code2', title: 'parentTitle2'}];
 myChild = {code1: [{id: 1, title: 'childTitle1'}, {id: 2, title: 'childTitle2'}], code2: [{id: 4, title: 'childTitle1'}]};

还有 html

<h3 *ngFor="let parent of myParent">{{parent .title}} 
  <br>
  <span *ngFor="let child of myChild[parent.code]"> {{child.title}} </span>
  <br>

</h3>

stackblitz 正在按您的预期运行。你能再分享一些代码吗，因为看起来数据可能不匹配。

Angular 7 嵌套用于使用父值作为子索引

Angular 7 nested for using parent value as index for child

javascript

arrays

nested-loops

ngfor

angular