javascript - 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'}]

我想迭代第一个，然后显示第二个的项目，使用父对象的“代码”值作为索引:

<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 正在按照您的预期运行。你能再分享一些代码吗，因为看起来数据可能不匹配。