使用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>