如何在打字稿中选中复选框值?

时间:2017-03-24 17:21:35

标签: angular typescript

我目前正在使用angular2。我有像

这样的HTML代码
<select id="color" class="colorDropDown" (change)="signalSelected($event, 'color')">
   <option *ngFor="let color of colors" value={{axis}} [selected]="color == channelPropertyModel.color">
      {{color}}
   </option>
</select>

我的打字稿文件如下

this.colors = ["ORANGE", "WHITE", "RED", "GREEN", "BLUE", "YELLOW", "CYAN", "SKYBLUE"];

在从下拉列表中更改任何颜色时,我正在调用方法

signalSelected(event: any, selection: string) {
    //Add the newly entered value and the corresponding field name into the dictionary
    this.selectedUIInfo[selection] = event.currentTarget.value;
}

但我没有使用event.currentTarget.value获取所选颜色。请建议如何从下拉列表中获取所选颜色。

2 个答案:

答案 0 :(得分:0)

您应该使用checked属性并将其分配给所选项目,如下所示

<select [(ngModel)]="selectedElement" (change)="changedval()">
     <option *ngFor="let color of colors" [ngValue]="color"> {{color}}</option>

</select>

<span *ngFor="let type of types"> 
      <input   type="checkbox"  [checked]="color===newElement" value="color"> {{color}}<br>
</span>




 changedval(){
     this.newElement=this.selectedElement;
     console.log(this.newElement)
  }

<强> LIVE DEMO

答案 1 :(得分:0)

请查看以下示例

 <select [(ngModel)]="selectedCity" (ngModelChange)="onChange($event)" >
  <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
</select>

class App {
  cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
  selectedCity = this.cities[1];

  onChange(city) {
    alert(city.name);
  }
}

Plunker