Angular嵌套类别和* ngFor循环 [英] Angular Nested categories and *ngFor loop

问题描述

我有数量不确定的数组，可以无限嵌套.我将在列出产品的页面的过滤"部分中使用此功能.但是我无法动态地弄清楚如何在html端创建它.

I have an undefined number of arrays that can go nested unlimited. I will use this in the "filtering" section on a page where I list products. But I couldn't dynamically figure out how to create it on the html side.

[
    {
      "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"方面，我正在尝试创建这样的代码.

On the "HTML" side, I am trying to create a code like this.

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

这是我的实时示例: https://stackblitz.com/edit/angular-yzdxca 如果您能分享您的想法，我将不胜感激.谢谢.

Here's my live sample: https://stackblitz.com/edit/angular-yzdxca I'd appreciate it if you could share your ideas. Thanks.

推荐答案

我只是给出这个想法，因此请稍后再进行修改.

I'm just giving out the idea, so adapt it afterwards.

这称为递归组件，它与条件一起调用.

This is called a recursive component, it's called with conditions.

recursive.component.html

<div>
  your content goes here
</div>
<!-- recursive calling -->
<app-recursive [data]="data" *ngIf="data"></app-recursive>

通过使组件调用自身，只要其中有数据，就可以使其重复.然后，在其上应用一个条件，该条件指出如果数据为空，则停止显示它.

By making the component call itself, you make it repeat as long as there is data in it. Then, you apply a condition on it, which states that if the data is empty, then you stop displaying it.

但是请小心:这类​​组件很重，如果您不管理数据，则可能会使应用程序崩溃.我建议您考虑一下您的模型并首先对其进行改进.

Be careful though : this kind of components are heavy and when you do not manager your data, you can make your application crash. I would recommend thinking about your model and improving it first.

这篇关于Angular嵌套类别和* ngFor循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！