Угловой материал Перемещение по строкам с помощью клавиш со стрелками вверх и вниз - PullRequest
Новая
       54

Угловой материал Перемещение по строкам с помощью клавиш со стрелками вверх и вниз

0 голосов
/ 04 октября 2019

Я добавил пользовательский ngclass в свою таблицу матов, чтобы сделать строки кликабельными. но теперь я бы хотел, чтобы пользователь мог перемещаться с помощью клавиш со стрелками вверх и вниз. используя этот git hub в качестве ссылки (https://github.com/angular/components/issues/14861) Я смог заставить его работать с первой попытки, используя tabindex для захвата события keydown. Но я не смог выяснить, почему оно толькоработает с первой попытки; вот блиц стека: https://stackblitz.com/edit/arrownavigation?file=app%2Ftable-basic-example.html

.HTML 

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;  let i= index"
    [ngClass]="{'highlight': selectedRowIndex == row.position}"
    (click)="highlight(row, i)"
    tabindex="999"
    (keydown.arrowdown)="arrowDownEvent(row, i)"
    (keydown.arrowup)="arrowUpEvent(row, i)"></tr>
</table>

.TS 

highlight(row: any){
    this.selectedRowIndex = row.position;
    console.log(row);
  }

   arrowUpEvent(row: object, index: number){
    var nextrow = this.dataSource[index - 1];
    this.highlight(nextrow);
  }

  arrowDownEvent(row: object, index: number){
    var nextrow = this.dataSource[index + 1];
     this.highlight(nextrow);
    console.log(index);
  }

.CSS 

.highlight{
  background: yellow;
}

tr:focus{
      outline: none;
  }

1 Ответ

1 голос
/ 04 октября 2019

Я исправил проблемы и теперь он работает. Смотрите это:

https://stackblitz.com/edit/arrownavigation-9qz7d5?file=app/table-basic-example.html

Основная проблема заключалась в том, что вы передавали 'i' в arrowDownEvent и arrowUpEvent, где вы должны были передать selectedRowIndex. Затем ваш определенный массив был проиндексирован 0, но индекс 'i' в * matRowDef был 1-проиндексирован. Поэтому мне пришлось изменить логику в arrowDownEvent и arrowUpEvent, чтобы решить эту проблему

...