Как отобразить все подмассивы элементов массива в Angular?

У меня есть такой массив:

type categories = {
  name: string;
  sub?: categories[];
};

categories: Array<categories> =
[{ name: 'C1',
      sub: [{name: 'S1',
        },
        {name: 'S2',
          sub: [{ name: 'SS1',
               sub: [{ name: 'SSS1',
                },
                { name: 'SSS2',
                },],
          },],
      },],
},];

Каждый саб может иметь неограниченное количество сабов. Как я могу отобразить все элементы всех подмассивов?

Благодарю вас!

Вы можете создать рекурсивный компонент.

jabaa 09.04.2022 14:28
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
1
1
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете рекурсивно вкладывать компоненты следующим образом:

@Component({
  selector: 'example-component',
  template: `
    <div *ngFor="let nestedCategory of nestedCategories.sub">
      <div>{{nestedCategory.name}}</div>
      <div *ngIf="nestedCategory.sub">
        <example-component [nestedCategories]="nestedCategory.sub"></example-component>
      </div>
    </div>
  `
})
export class ExampleComponent {
  @Input('nestedCategories') nestedCategories!: Array<categories>;
}

Затем в шаблоне родительского компонента вы можете объявить его следующим образом:

<example-component [nestedCategories]="categories"></example-component>

Другие вопросы по теме