typescript - Hur man visar inbäddade objekt i Angular ett i taget

Jag försöker visa ett nästlat objekt för att välja huvud- eller underordnat objekt för att lägga till ett annat inuti

const categories = [
  {
    id: 1,
    title: 'Tecnology',
    subCategory: [
      {
        id: 3,
        title: 'JavaScript',
        subCategory: [
          {
            id: 4,
            title: 'Angular',
          },
        ],
      },
      {
        id: 5,
        title: 'C#',
      },
    ],
  },
  {
    id: 2,
    title: 'Health',
  },
];

min html

<div>
  <a
    class="dropdown-item"
    *ngFor="let category of categories"
  >

    {{ category.title }}
    <span
      *ngFor="let subCategory of category.subForumCategories"
    >
      > {{ subCategory.title }}
    </span>
  </a>
</div>

förväntat resultat

Tecnology
Tecnology > JavaScript
Tecnology > javaScript > Angualr
Tecnology > C#
Health

men jag fick resultatet

Tecnology > javaScript > C#
Health

i stackblitz: https://stackblitz.com/edit/angular-ivy-jfkszn?file=src/app/app.component.html

Svar #1

Förmodligen bättre att lösa detta i TypeScript och sedan iterera över en array av strängar istället för objekten. Angular-mallar är bra för mycket, men detta börjar troligtvis bli för mycket.

Här är ett exempel på vad du kan ha i ts

var categories = [{
    id: 1,
    title: "Technology",
    subCategory: [{
        id: 3,
        title: "JavaScript",
        subCategory: [{
          id: 4,
          title: "Angular"
        }]
      },
      {
        id: 4,
        title: "C#"
      }
    ]
  },
  {
    id: 2,
    title: "Health"
  }
];


getList();

function getList() {
  var list = extractSubCategories(categories);
  console.log(list);
}

function extractSubCategories(categories) {
  var list = [];
  for (var c of categories) {
    if (c.subCategory) {
      list.push(`> ${c.title}`);
      list.push(...extractSubCategories(c.subCategory).map(sc => `> ${c.title} ${sc}`));
    } else {
      list.push(`> ${c.title}`);
    }
  }
  return list;
}

mall :

<div>
  <a class="dropdown-item" *ngFor="let category of getList()" > {{category}} </a>
</div>

Svar #2

Du kan skapa en rekursiv komponent. Sedan kan du bara skicka in objektet för att visa det på det sätt du vill.

komponent.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'categories',
  template: `
     <div *ngFor="let category of categories">
        <div>
          {{titleHistory}} {{category.title}}
        </div>
        <categories[categories]="category.subCategory" 
                   [title]="titleHistory + category.title" 
                   [depth]="depth+1" 
                   *ngIf="category.subCategory"></categories>
    </div>`,
})
export class CommentComponent implements OnInit {
  @Input() categories: Categories;
  @Input() title: string = '';
  @Input() depth: number = 0;

  titleHistory = '';

  ngOnInit() {
    this.titleHistory = this.depth === 0 ? this.title : (this.title + ' > ');
  }
}

app.component.html

<categories [categories]="categoriesData"></categories>

stackblitz

Redigera: uppdaterade stackblitz med fler alternativ