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

Posted

技术标签:

【中文标题】如果使用 object.value 而不是 object,则角度递归模板列表将变为无限递归【英文标题】:Angular recursive template list turns into infinite recursion if object.value is used instead of object 【发布时间】:2020-10-17 00:16:33 【问题描述】:

我想在 Angular 模板中呈现递归列表。

这是component.ts中的data属性:

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

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",
    ,
  ]

]

如果我现在将模板中所有出现的data 更新为mainData.data(例如let-datalet-mainData.data),我会得到一个无限递归。我该如何解决?我认为“。”有问题。我也不确切知道代码是做什么的,因为我从某个地方复制了它。 let-data 和 $implicit 的目的是什么?非常感谢!

【问题讨论】:

【参考方案1】:

也许这对你有帮助。

打字稿

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>
        
    

【讨论】:

以上是关于如果使用 object.value 而不是 object,则角度递归模板列表将变为无限递归的主要内容,如果未能解决你的问题,请参考以下文章

在 python 中加载 JSON 作为实际对象,而不是 dict [重复]

如何在 SceneKit 中使用 OBJ 文件或 CTM 文件而不是 DAE 文件?

从 obj 文件加载时显示单色而不是纹理

C++ 可执行文件是不是包括 .obj、.lib 和 .dll?

spring data jpa 能不能只返回一个字段的值,而不是整个对象

动态数组 C++,新 Obj[size] 的麻烦只创建 1 个对象指针,而不是数组