Javascript 角度嵌套类别和*ngFor循环

我有一个未定义数量的数组，可以无限嵌套。我将在列出产品的页面上的“过滤”部分使用此选项。但我无法动态地找出如何在html端创建它

[
    {
      "name": "Models",
      "items": [
        {
          "name": "Fabric",
          "fieldType": "checkbox",
          "subCategories": []
        },
        {
          "name": "Linen",
          "fieldType": "checkbox",
          "subCategories": [
            {
              "name": "Colored",
              "fieldType": "checkbox",
              "subCategories": []
            },
            {
              "name": "Solid Color",
              "fieldType": "checkbox",
              "subCategories": [
                {
                  "name": "Black",
                  "fieldType": "checkbox",
                  "subCategories": []
                },
                {
                  "name": "White",
                  "fieldType": "checkbox",
                  "subCategories": []
                },
                {
                  "name": "Red",
                  "fieldType": "checkbox",
                  "subCategories": []
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "name": "Other",
      "items": [
        {
          "name": "Radio Buttons",
          "fieldType": "checkbox",
          "subCategories": [
            {
              "name": "Radio 01",
              "fieldType": "radio",
              "subCategories": []
            },
            {
              "name": "Radio 02",
              "fieldType": "radio",
              "subCategories": []
            }
          ]
        }
      ]
    }
  ]

在“HTML”方面，我试图创建这样的代码

  <div class="filter-item">
    <span class="filter-item-title">Models</span>
    <ul>
      <li>
        <mat-checkbox color="primary">Fabric</mat-checkbox>
      </li>
      <li>
        <mat-checkbox color="primary">Linen</mat-checkbox>
        <ul>
          <li><mat-checkbox color="primary">Colored</mat-checkbox></li>
          <li>
            <mat-checkbox color="primary">Solid Color</mat-checkbox>
            <ul>
              <li><mat-checkbox color="primary">Black</mat-checkbox></li>
              <li><mat-checkbox color="primary">White</mat-checkbox></li>
              <li><mat-checkbox color="primary">Red</mat-checkbox></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="filter-item">
    <span class="filter-item-title">Other</span>
    <ul>
      <li>
        <mat-checkbox color="primary">Radio Buttons</mat-checkbox>
        <ul>
          <li>
            <mat-radio-group aria-label="Select an option">
              <mat-radio-button color="primary" value="1">Radio 01</mat-radio-button>
              <mat-radio-button color="primary" value="2">Radio 02</mat-radio-button>
            </mat-radio-group>
          </li>
        </ul>
      </li>
    </ul>
  </div>

模型


织物


亚麻布

有色的

纯色

黑色的
白色的
红色的





其他


单选按钮


无线电01
无线电02

这是我的现场样品：

---

如果你能分享你的想法，我将不胜感激。谢谢。

我只是想表达一下想法，所以以后再修改

这被称为递归组件，通过条件调用

recursive.component.html

你的内容放在这里

通过调用组件本身，只要其中有数据，就可以使其重复。然后，对其应用一个条件，即如果数据为空，则停止显示

---

但要小心：这种组件很重，如果不管理数据，可能会导致应用程序崩溃。我建议您先考虑一下您的模型并加以改进

我只是想表达一下想法，所以以后再调整一下

这被称为递归组件，通过条件调用

recursive.component.html

你的内容放在这里

通过调用组件本身，只要其中有数据，就可以使其重复。然后，对其应用一个条件，即如果数据为空，则停止显示

---

但要小心：这种组件很重，如果不管理数据，可能会导致应用程序崩溃。我建议您先考虑一下您的模型并加以改进

我要试验一下这个想法。谢谢，谢谢。我用你说的方法做了实验，结果完全符合我的要求。也许我会把样品留在这里，以防他需要另一个朋友。没问题，很高兴我能帮忙！至于链接，如果我是你，我会用代码自己回答（stackblitz有一天可能会失败，SOF建议总是把你的代码片段放在答案中）。无论如何，回头见！fieldType：我将在html中检查它是“复选框”还是“收音机”。完成此操作后，我在此处编辑帖子并添加代码。再次感谢。我要尝试一下这个想法。谢谢，谢谢。我用你说的方法做了实验，结果完全符合我的要求。也许我会把样品留在这里，以防他需要另一个朋友。没问题，很高兴我能帮忙！至于链接，如果我是你，我会用代码自己回答（stackblitz有一天可能会失败，SOF建议总是把你的代码片段放在答案中）。无论如何，回头见！fieldType：我将在html中检查它是“复选框”还是“收音机”。完成此操作后，我在此处编辑帖子并添加代码。再次感谢。