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>

Accordion Item组件

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

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

因为每个accordion-item我都再次n加载了这个标签<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 >

动态加载手风琴垫

1 个答案: