Question

以下是我的HTML：＆lt; select id =＆＃34; movie＆＃34;命名=＆＃34;电影＆＃34; （KEYUP）=＆＃34;按键（$事件）;＆＃34; [（ngModel）] =＆＃34; movies.value.name＆＃34; ＆lt; option * ngFor =＆＃34;让movieNameOptions＆＃34; [value] =＆＃34; movie.value＆＃34;＆gt; {{movie.label}} ＆LT; /选项＆GT; ＆LT; /选择＆GT; 我正在填充模型中的选项。我需要在特定的F9键按下以编程方式滚动标签内的电影选项。这就是我的f9 keyPress功能： keyPress（event）：void { if（event.keyCode === 120）{ //不知道该怎么做 } } 如何通过按F9滚动浏览可用选项？例如，如果我有五个项目并且我在项目＃3上，按F9，选择的选项应切换到项目＃4。另一个新闻，应该去第5项。另一个新闻应该再次登陆第1项。任何帮助深表感谢。

Answer 1

花了一段时间，但我已经为你做了一些事。

如果您点击 F9 按钮，则所选值将加1。当它到达moviesList数组的最后一个元素时，所选的值将重置为第一个元素。

<强> app.component.html

<select id="movie" name="Movie" (keyup)="keyPress($event)" 
  [(ngModel)]="selectedMovie" autofocus>
<option *ngFor="let movie of moviesList">{{ movie.movie }}</option>

<强> app.component.ts

  selectedMovie: string;
  moviesList = [{movie: 'Shrek'}, {movie: 'Inception'}, {movie: 'Interstellar'},  {movie: 'Star Wars'},  {movie: 'Nemo'} , {movie: 'Pluton'},  {movie: 'Pokemon'}];
  i: number = 0;

  constructor() { 
    this.selectedMovie = this.moviesList[0].movie;
  }

  keyPress(event): void {
     this.i = this.moviesList.map(v => v.movie == this.selectedMovie).indexOf(true);
        if (event.keyCode === 120) {
          this.i++;
          if (this.i < this.moviesList.length) {
            this.selectedMovie = this.moviesList[this.i].movie;
          } else {
            this.selectedMovie = this.moviesList[0].movie;
            this.i = 0;
          }    
      } 
  }

<强> Plunker link

Answer 2

解决方案的原则由Kind用户的答案证明。但代码可能更简单：

  <select id="movie" name="Movie"
          (keyup.f9)="f9Pressed()"
          [(ngModel)]="movies.value.name">
    <option *ngFor="let movie of movieNameOptions" [value]="movie.value">
      {{ movie.label }}
    </option>
  </select>

和

f9Pressed() {
  let index = this.movieNameOptions.map(m => m.value).indexOf(this.movies.value.name);
  index = (index + 1) % this.movieNameOptions.length;
  this.movies.value.name = this.movieNameOptions[index].value;
}

有关完整的补丁，请参阅http://plnkr.co/edit/Bbf7Yh7NEqun6DKsFwQm?p=preview。

Angular2 - 如何在按键时更改所选的<select>元素选项？

2 个答案: