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

Question

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

使用上面的引导组件，当我从下拉列表中选择一个值时，它应该在该下拉列表中显示所选值。有人可以帮助我解决这个问题吗？

Answer 1

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

所以试试这个，用我的代码给你举个例子。将其粘贴到您的组件.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>

Answer 2

使用 PrimeNG

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

它以易于使用的方式具有许多元素，编码非常少