Question

这是我的下拉列表的结构

公司>仓库

每个公司都有多个仓库我已经为公司创建了一个组件，并且在对公司（菜单项）的onclick服务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 -->

这是应用程序视图：

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

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

1 个答案: