Question

我正在尝试使用Angular获取select的所选选项索引。我正在使用Angular（4）和Ionic 3.

我的模板如下所示：

<ion-select [(ngModel)]="obj.city">
   <ion-option *ngFor="let city of cities; let i = index;" 
                [value]="city"  [selected]="i == 0">
                {{city.name}}
   </ion-option>
</ion-select>

我希望在组件代码中访问所选城市的索引。可以说，我希望将该索引分配给组件中的变量selectedCityIndex。

我当前的代码是预先选择第一个选项作为默认选项。解决方案不应该破坏此功能。

我正在寻找一种不包括对数组进行交互的解决方案（即JavaScript部分中没有循环）。它不应该使用＆＃34; indexOf＆＃34;方法或文档的方法，如＆＃34; document.getElementById＆＃34;。我没有使用jQuery。

Answer 1

使用forEach根据<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#HOME">HOME</a> </li> <li> <a href="#ABOUT">ABOUT US</a> </li> <li> <a href="#SERVICES">SERVICES</a> </li> <li> <a href="#TEAM">TEAM</a> </li> <li> <a href="#PORTFOLIO">PORTFOLIO</a> </li> <li> <a href="#PRICING">PRICING</a> </li> <li> <a href="#BLOG">BLOG</a> </li> <li> <a href="#CONTACT">CONTACT</a> </li> </ul> </nav> <script> $('li').click(function(){ $('a').removeClass('links'); $(this).children().addClass('links'); }); </script>中的值进行迭代，如下所示

ngModel

Answer 2

使用(ngModelChange)。（ngModelChange）事件侦听器在所选值更改时发出事件。

 @Component({
      selector: 'my-app',
      template: `
        <h2>Select demo</h2>
        <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);
      }
    }

示例：https://plnkr.co/edit/tcnPfCplQbywbBHVsiUy?p=preview

Answer 3

<ion-select [(ngModel)]="obj.city">
        <ion-option *ngFor="let city of cities; let i = index" (ngModelChange)="onChange(i)" [value]="city">
            {{city.name}}
        </ion-option>
</ion-select>

Answer 4

如果您想在组件类文件中使用索引，请检查此plnkr https://plnkr.co/edit/9Z7jjeSW7fmTUR7SbqNk?p=preview

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <h2>Select demo</h2>
    <select (change)="onChange($event.target.value)" >
      <option *ngFor="let c of cities;let i = index" [value]="i"> {{c.name}} </option>
    </select>
  `
})

class App {

  public value:integer;
  cities = [{'name': 'Pune'}, {'name': 'Mumbai'}, {'name': 'Nagar'}];
  selectedCity = this.cities[1];

  constructor() {
    this.value = 0;
  }
  onChange(cityindex) {
    console.log(cityindex);
    alert(cityindex);
  }

}


@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

希望这有帮助。

Answer 5

浪费了3个小时，我找到了一行Java脚本解决方案。

您可以使用event.target["selectedIndex"] - 1来获得selectedIndex的选择。

示例：

<select class="form-control selectpicker" #Code name="Code" [(ngModel)]="model.Code" (change)="searchWithCode($event)" >
    <option value="" selected="selected">--Please select--</option>
    <option *ngFor="let x of Codes" [value]="x.Code" [selected]="x.Code == model.Code">{{x.Name}}</option>
</select>



searchWithCode(event:Event) : void {
    let index:number = use event.target["selectedIndex"] - 1;
}

参考：https://github.com/angular/angular/issues/18842#issuecomment-324399823

如何在Angular中获取所选选项的索引

5 个答案: