Повторите один и тот же компонент с другими данными в раскрывающемся меню 5

Question

Вот структура моего выпадающего списка

Компании> Склады

каждая компания имеет несколько складов Я создал компонент для компании, и после http-запроса на сервис onclick для компании (пункт меню) я включил все компании и компании цикла в компонент компании. Я делаю то же самое с депо (пункт меню внутри компании), вывести список депо и показать его внутри компонента депо

Теперь вот моя проблема, Когда я получаю список депо по нажатию на депо (пункт меню), но, когда я зацикливаюсь на депо, все депо всех компаний показывают один и тот же список депо, поэтому он фактически связывает список депо всех компонентов депо, доступных на странице,

Я просто хочу показать список складов этой конкретной компании.

Любая помощь действительно ценится

Это мой код:

Иерархия есть => Компания-> Склад

<a href="javascript:void(0)" (click)="onClickCompanies()">company</a>
<!-- code of company component start here -->
<ul>
<li *ngFor="let company of companies" class="childul levels">
    <a href="javascript:void(0)" >{{company.CompanyName}}</a>   
    <ul class="nested-menu-items parentsul">
        <li class="childul levels">
            <a href="javascript:void(0)" (click)="onClickDepot(company.CompanyID)">Depots</a>
<!-- code of depot component start here -->
            <ul class="nested-menu-items parentsul">
                <li class="childul levels" *ngFor="let companyDepot of companyDepots">
                    <a href="javascript:void(0)">{{companyDepot.DepotName}}</a>
                </li>
            </ul>
<!-- code of depot component end here -->
        </li>
    </ul>
</li></ul><!-- code of company component end here -->

Вот вид приложения:

Это актуальное изображение после нажатия депо New Company 2, а также добавления в новую компанию 1 и далее все также

Answer 1

для каждой компании у вас должен быть список складов! компании должны быть примерно такими:

interface company{
  CompanyID:number;
  CompanyName:string;
  depots:depots[];
  }

 interface depots{
  DepotName:string;
  }
 companies=company[];

onClickDepot(id)
{
  let depotsById = getDepots(id);//this function gets the depots
   let company = this.companies.find((x)=>x.CompanyID==id)
  company.depots=depotsById;
}

    in html:
    <!-- code of company component start here -->
    <ul>
    <a href="javascript:void(0)" (click)="onClickCompanies()">company</a>


    <li *ngFor="let company of companies" class="childul levels">
        <a href="javascript:void(0)" >{{company.CompanyName}}</a>   
        <ul class="nested-menu-items parentsul">
            <li class="childul levels">
                <a href="javascript:void(0)" (click)="onClickDepot(company.CompanyID)">Depots</a>
    <!-- code of depot component start here -->
                <ul class="nested-menu-items parentsul">
                    <li class="childul levels" *ngFor="let companyDepot of company.depots ">
                        <a href="javascript:void(0)">{{companyDepot.DepotName}}</a>
                    </li>
                </ul>
    <!-- code of depot component end here -->
            </li>
        </ul>
    </li></ul><!-- code of company component end here -->