Angular5-将索引值传递给组件

Question

如何将所选选项的索引值传递给组件。

<select (click)= "onpressed(i)" placeholder="select a value" class="custom-select"  >
<option *ngFor="let data of data3; let i = index;"   value = {{data.dash_name}} >
{{data.dash_name}}
 </option>
</select>

Answer 1

像这样使用。

<select (change)="onChange($event.target.selectedIndex)">
<option  *ngFor="let item of items; let i=index;" [value]="item.value">{{item.value}}</option>

组件：

onChange(index){
  console.log(index);
}

Answer 2

Live Example文件modalTest.component.ts和app.component.html中的相关代码

尝试一下：

  <select class="form-control" [(ngModel)]="index">
  <option *ngFor="let razon of razones; let i = index" [ngValue]="i">
    {{razon.descRazon}}
  </option>
</select>

在组件类中

export class ModalTest  {

    razones = [{
      descRazon:'testing Uno'
    },{
      descRazon:'testing Dos'
    }]

    index = 0;

  constructor(){}

}