如何在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

如果您正在使用Material Design，则可以执行以下操作：

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

在组件内部，您必须创建包含要显示的文本和值的菜单项（menuItems）数组。