如何根据下拉菜单1中选择的内容在下拉菜单2中显示来自API的数据

时间:2018-12-12 12:23:54

标签: angular typescript api frontend

我有两个下拉菜单。两者都从API接收数据。根据第一个下拉列表中选择的内容,下拉列表2中将显示数据。

sidebar.component.html

ng-if

sidebar.component.ts

<ul ng-repeat="n in data">
  <li ng-if="!$first && !$last">{{n.Name}}</li>
  <li ng-if="$first" ng-keydown="something">{{n.Name}} |  first element</li>
  <li ng-if="$last" ng-keydown="something">{{n.Name}} |  last element</li>
</ul>

必须使用在第一个下拉列表中选择的来调用ProjectVariant API

<div class="dropdown  ml-auto">
    <select (change)=selectedHandlerProjectName($event) class="btn btn-secondary dropdown-toggle" style="margin-left: -10px;border-left-width:15px;padding-left:11px;padding-right: 14px;margin-right: 12px;border-right-width: 12px">
        <option value = "default">Select project</option>
        <option *ngFor = "let project of selectProject" value = {{projectName}}>{{project.projectName}}</option>
    </select>
</div>

<div class="dropdown  m3-auto">
    <select (change)=selectedHandlerProjectVariantName($event) class="btn btn-secondary dropdown-toggle">
        <option value = "default">Select variant project</option> 
        <option *ngFor = "let project of selectVariantProject" value = {{projectVariantName}}>{{project.projectVariantName}}</option>  
     </select>
</div> 

如何建立此依赖关系并将第一个下拉列表中选择的值作为参数传递给 getSelectedVariantProject(id:number)

0 个答案:

没有答案