如何在Angular 2中创建选择值下拉值？

问题描述：

<li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li *ngFor="let fruit of Vegetables.Fruits"> 
      <a href="#">{{fruit.Name}}</a> 
     </li> 
    </ul> 
</li>

通过上述自举组件，当我从下拉列表中选择一个值，它应该显示在下拉列表中选择的值。有人可以帮我解决这个问题吗？如何在Angular 2中创建选择值下拉值？

约''什么？ –

上面的代码可以实现吗？。因为我使用bootstrap，我想用bootstrap组件实现上述功能:) –

只需将“活动”类添加到li元素即可。 –

答

这里是选择框的工作示例。数据在component.ts文件中创建，然后在html文件中循环。

那么试试这个，用我的代码给你一个例子。粘贴在你component.ts文件

cardTypes = ['American Express', 'Discover', 'Master Card', 'Visa'];

然后转到您的HTML文件，并粘贴此在，

<div class="form-group col-sm-12 col-md-4"> 
    label for="state_address">Cards</label> 
     <div class="input-group"> 
      <span class="input-group-addon"><i class="fa fa-street-view"></i> 
      </span> 
    <select class="form-control" id="cardTypes"formControlName="cardTypes"> 
    <option *ngFor="let cardType of cardTypes">{{cardType}}</option> 
    </select> 
    </div> 
    </div>

非常感谢你@Wuno。它的工作:) –

没问题。尝试并通读它，使其有意义。你会需要它很多！ :) – wuno

答

使用PrimeNG

https://www.primefaces.org/primeng/#/dropdown

它在容易的许多元素-to-使用方式具有非常少的编码

我会检查并取回@EffinDJ –

如何在Angular 2中创建选择值下拉值？

相关推荐