角度2の単純なドロップダウンコンポーネント

Question

単純なHTMLドロップダウンのためのtypescriptコンポーネントの作成方法は？

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

これを実装する方法は？

Answer 1

<select [(ngModel)]="whereWeStoreTheValue"> 
    <ng-container *ngFor="let option of options"> 
    <option *ngIf="!option.isDivider" [ngValue]="option">{{option.name}}</option> 
    <option *ngIf="option.isDivider" disabled>{{option.name}}</option> 

    </ng-container> 
</select> 

class MyComponent { 
    options = [ 
    {name: 'Action'}, 
    {name: 'Another action'}, 
    {name: 'Something else here'}, 
    {isDivider: true}, 
    {name: 'Separated link} 
    ]; 
}