动态加载垫手风琴

Question

基于 JSON 结构，我想渲染手风琴。下面是它的样子。

const area = [{
  type: 'column',
  text: ''
}, {
  type: 'accordion-item',
  text: 'accordion-item 1'
},
{
  type: 'accordion-item',
  text: 'accordion-item 2'
},
{
  type: 'accordion-item',
  text: 'accordion-item 3'
},
{
  type: 'column',
  text: ''
}]

所以我的组件html是这样的，

 <ng-container *ngFor="let area of areas">
  <ng-container *ngIf="area.type === 'accordion-item'; else section">
    <mat-accordion>
      <accordion-item [item]="area"></accordion-item>
    </mat-accordion>
  </ng-container>
  <ng-template #section></ng-template>
</ng-container>

手风琴项组件

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
             {{title}}
        </mat-panel-title>
    </mat-expansion-panel-header>
</mat-expansion-panel>

我可以加载手风琴组件。但问题是本机功能无法按预期工作。

因为对于每个accordion-item，我都会再次加载这个标签<mat-accordion>。

那么如何避免这种情况呢？请帮忙

---

更新。

实施方案后，我的模板是这样的

<mat-accordion>
  <ng-container *ngFor="let area of areas" *ngTemplateOutlet="section; context:area">
    <accordion-item *ngIf="area.type === 'accordion-item'; else section" [item]="area">
    </accordion-item>
  </ng-container>
</mat-accordion>

<ng-template #section let-name="name">
  <area-template [area]="area" class="{{ area.type }}">
  </area-template>
</ng-template>

它抛出模板阶段错误。请帮忙

Answer 1

<mat-accordion>
   <ng-container *ngFor="let area of areas" >
      <accordion-item *ngIf="area.type === 'accordion-item'"  [item]="area"></accordion-item>
   </ng-container>
</mat-accordion>

<ng-container *ngFor="let area of areas" #section>
   <ng-container *ngIf="!area.type === 'accordion-item'" #section>
      YOUR TEMPLATE
   </ng-container >
</ng-container >