如何在angular2应用程序的下拉列表中显示选定值下的某些内容？

Question

我已经开发了角度2应用程序与左侧导航栏有下拉。但是我想要的功能就像我在导航栏下拉菜单中选择值时一样，它只显示选定下拉值下的一些链接列表。

这是我写来显示导航栏内的下拉的代码：

<li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li>---->if I select Action from Drop Down menu then some list of links displayed under the selected value only related to Action value. 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 

这是我想在角2应用的功能性的图像：

所以，任何人都可以建议我如何在angular 2应用程序中编写上述功能的代码？

Answer 1

如果你使用的材质设计，你可以做到以下几点：

<md-select placeholder="Something" [(ngModel)]="YourModel" name="something" required> 
     <md-option *ngFor="let item of menuItems" [value]="item.value">{{item.text}}</md-option> 
</md-select> 

你必须创建菜单项（的菜单项）与文本和要显示值的数组的组件中。