在下拉列表中使用不同的数据重复相同的组件 - 角度 5

Question

这是我的下拉列表的结构

公司 > 仓库

每个公司都有多个仓库 我为公司创建了一个组件，在公司（菜单项）上的 onclick 服务 http 请求之后，我将所有公司和循环公司带入公司组件。 我对仓库（公司内部的菜单项）做同样的事情，带上仓库列表并在仓库组件中显示它

现在这是我的问题， 当我点击 depots（菜单项）时获得 depot 列表，但是当我遍历 deports 时，所有公司的所有 deports 都显示相同的 depot 列表，因此它实际上绑定了页面上所有可用 depot 组件的 depot 列表，

我只想显示该特定公司的仓库列表。

非常感谢任何帮助

这是我的代码：

层次结构 => Company->Depot

<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 -->

这是应用程序视图：

This is actual image after clicking depot of New Company 2 And also getting append to new comapny 1 and next all too

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 -->