使用ngFor在JSON中打印子值

Question

我想使用一些具有Parent和Child属性的JSON数据来显示带有父子内容的手风琴。

使用ngFor时，在app.component.html中，当手风琴展开时，它仅打印第一个子属性，而不是所有子属性。另外，我希望文本框在每个手风琴面板中都有唯一的ID。

StackBlitz Example

Answer 1

检查 WORKING STACKBLITZ

将 *ngFor放入p标记而不是div 中，它具有面板类，这会导致显示子项时出现问题。

<div *ngFor="let item of data;let i = index;">
  <button class="accordion" (click)="toggleAccordian($event, i)"> {{item.parentName}} </button>
  <div class="panel" hide="!item.isActive">
    <input type="text">
    <p *ngFor="let child of item.childProperties"> {{child.propertyName}} </p>
  </div>
</div>