Угловые вложенные категории и цикл * ngFor

Question

У меня есть неопределенное количество массивов, которые могут быть вложенными неограниченно.Я буду использовать это в разделе «фильтрация» на странице, где я перечисляю продукты.Но я не мог динамически выяснить, как создать его на стороне 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>

Вот мой живой пример: https://stackblitz.com/edit/angular-yzdxca Буду признателен, если вы поделитесь своими идеями.Спасибо.

Answer 1

Я просто выдвигаю идею, так что адаптируйте ее потом.

Это называется рекурсивным компонентом, он вызывается с условиями.

recursive.component.html

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

Производя сам вызов компонента, вы повторяете его, пока в нем есть данные.Затем вы применяете к нему условие, согласно которому, если данные пусты, вы перестанете их отображать.

Будьте осторожны: такие компоненты тяжелые, и когда вы не управляете своими данными, вы можете вызвать сбой приложения.Я бы порекомендовал подумать о вашей модели и улучшить ее в первую очередь.