Angular 嵌套類別和 *ngFor 循環

Question

我有一個未定義數量的 arrays 可以無限嵌套 go。 我將在我列出產品的頁面上的“過濾”部分使用它。 但我無法動態地弄清楚如何在 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>

通過讓組件自己調用，只要其中有數據，就可以讓它重復。 然后，對它應用一個條件，即如果數據為空，則停止顯示它。

但要小心：這種組件很重，當您不管理數據時，可能會使應用程序崩潰。 我建議考慮您的 model 並首先對其進行改進。