Angular 如果使用object.value而不是object，则角度递归模板列表将变成无限递归

我想在角度模板中呈现递归列表

这是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",
    },
  ]
}
]

以下是我的模板的外观：

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

---

如果我现在将模板中所有出现的

data

更新为

mainData.data

（例如

let data

更新为

let mainData.data

），我会得到一个无限递归。我怎样才能修好它？我认为“.”有问题。我也不知道代码的确切用途，因为我是从某处复制的。let数据和$implicit的目的是什么？非常感谢

也许这对你有帮助

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>
        
    

{{item.key}}:{{item.value}
{{item.key}}:{{item.value}
{{item.key}}：

这可能对您有所帮助

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>
        
    

{{item.key}}:{{item.value}
{{item.key}}:{{item.value}
{{item.key}}：