typescript - Angular rekursiv mallista blir oändlig rekursion om object.value används istället för object

Jag vill rendera en rekursiv lista i en Angular-mall.

Detta är dataattributet i component.ts:

data =  [
{
  type: "TEXT",
  key: "text_key_1", 
  value: "text_value_1",
},
{
  type: "INTEGER",
  key: "int_key_1",
  value: 42,
},
{
  type: "ARRAY",
  key: "array_key_1",
  value: [
    {
      type: "TEXT",
      key: "text_key_2", 
      value: "text_value_2",
    },
    {
      type: "TEXT",
      key: "text_key_3", 
      value: "text_value_3",
    },
  ]
}
]

Så här ser min mall ut:

<ul>
  <ng-template #recursiveList let-data>
    <li *ngFor="let item of data">
      <ng-container [ngSwitch]="item.type">
        <ng-container *ngSwitchCase="'TEXT'">{{item.key}}: {{item.value}}</ng-container>
        <ng-container *ngSwitchCase="'INTEGER'">{{item.key}}: {{item.value}}</ng-container>
        <ng-container *ngSwitchCase="'ARRAY'">
          {{item.key}}:
          <ul>
            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.value }"></ng-container>
          </ul>
        </ng-container>
      </ng-container>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: data }"></ng-container>
</ul>

Så här ser slutresultatet ut:

Problemet är att data är inbäddat i ett annat objekt mainData:

mainData =  { data: [
{
  type: "TEXT",
  key: "text_key_1", 
  value: "text_value_1",
},
{
  type: "INTEGER",
  key: "int_key_1",
  value: 42,
},
{
  type: "ARRAY",
  key: "array_key_1",
  value: [
    {
      type: "TEXT",
      key: "text_key_2", 
      value: "text_value_2",
    },
    {
      type: "TEXT",
      key: "text_key_3", 
      value: "text_value_3",
    },
  ]
}
]
}

Om jag nu uppdaterar alla förekomster av data till mainData.data i mallen (t.ex. let-data till let-mainData.data), får jag en oändlig rekursion. Hur kan jag fixa det? Jag tror att det finns ett problem med ".". Jag vet heller inte exakt vad koden gör eftersom jag kopierade den någonstans ifrån. Vad är syftet med let-data och $implicit? Tack så mycket!

Svar #1

Kanske kan detta hjälpa dig.

Typescript

data: any[] = mainData.data;

HTML

<ul>
          <ul *ngFor="let item of data">  
             <ng-container [ngTemplateOutlet]="recursiveListTmpl" [ngTemplateOutletContext]="{ data: item }">
             </ng-container>
          </ul>
    
    <ng-template #recursiveList let-data="data">
            <li *ngFor="let item of data">
              <ng-container [ngSwitch]="item.type">
                <ng-container *ngSwitchCase="'TEXT'">{{item.key}}: {{item.value}}</ng-container>
                <ng-container *ngSwitchCase="'INTEGER'">{{item.key}}: {{item.value}}</ng-container>
                <ng-container *ngSwitchCase="'ARRAY'">
                  {{item.key}}:
                  <ul>
                    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.value }"></ng-container>
                  </ul>
                </ng-container>
              </ng-container>
            </li>
    </ng-template>
</ul>