Question

我正在尝试为自己的目的创建自动填充功能。过滤工作正常。我还要突出显示所选项目。但有一个问题。首先看看我的代码，然后我会详细解释这个问题。

以下是组件：

import { Component, OnInit } from '@angular/core';
import { Person } from '../../Models/person';

@Component({
  selector: 'app-auto-complete',
  templateUrl: './auto-complete.component.html',
  styleUrls: ['./auto-complete.component.css']

})
export class AutoCompleteComponent implements OnInit{

    constructor() {}

    showSuggestions: boolean;
    query: string;
    people: Person[];
    selectedRow: Number;

    ngOnInit() {
        this.query = '';
        this.people  = [
            new Person ('Shane', 'Watson', 'Australia'),
            new Person ('David', 'Warner', 'Australia'),
            new Person ('Ricky', 'Ponting', 'Australia'),
            new Person ('Adam', 'Gilchrist', 'Australia'),
            new Person ('Andrew', 'Symonds', 'Australia'),
            new Person ('Sachin', 'Tendulkar', 'India'),
            new Person ('Rahul', 'Dravid', 'India'),
            new Person ('Virender', 'Sehwag', 'India'),
            new Person ('Mahendra', 'Dhoni', 'India'),
            new Person ('Virat', 'Kohli', 'India'),
            new Person ('Gautam', 'Gambhir', 'India')
        ];
    }

    inputFocused() {
        this.showSuggestions = true;
    }

    inputBlurred() {
        this.showSuggestions = false;
    }

    setClickedItem(index: Number) {
        this.selectedRow = index;
        this.query = this.people[+index].firstName;
        this.showSuggestions = false;        
    }

    setSelectedItem(event) {
        if(event.keyCode == 40) { //down arrow
            if(this.selectedRow == null || this.selectedRow == undefined) {
                this.selectedRow = 0;
            } else if(this.selectedRow >= this.people.length - 1){
                this.selectedRow = 0;
            } else {
                this.selectedRow = +this.selectedRow + 1;
            }
        } else if(event.keyCode == 38) { //up arrow
            if(this.selectedRow == null || this.selectedRow == undefined) {
                this.selectedRow = this.people.length - 1
            } else if(this.selectedRow <= 0) {
                this.selectedRow = this.people.length - 1;
            } else {
                this.selectedRow = +this.selectedRow - 1;
            }
        } else if(event.keyCode == 9) { //TAB
            if(!(this.selectedRow == null || this.selectedRow == undefined)) {
                this.query = this.people[+this.selectedRow].firstName;
            }                    
            this.showSuggestions = false;            
        }
    }
}

以下是模板：

<div>
  <input type="text" (focus)="inputFocused()" [(ngModel)]="query" (keydown)="setSelectedItem($event)" />
  <table *ngIf="showSuggestions" (blur)="inputBlurred()">
    <thead>
      <tr>
        <td>First Name</td>
        <td>Last Name</td>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let person of (people | textFilter : query); let i = index"
          (click)="setClickedItem(i)" [ngClass]="{'active': (i == selectedRow)}">
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
      </tr>
    </tbody>
  </table>
</div>

这是样式表：

table tr.active td {
  background-color:#123456 !important;
  color: white;
}

问题：

当我按下键盘上的箭头或向上箭头时，下一个或上一个项目会突出显示。没关系。但是当我使用输入框搜索然后如果我按下箭头或向上箭头时，人物集合中的下一个或上一个项目会突出显示，它也会突出显示不可见的项目。我想要的只是按向下箭头或向上箭头突出显示已过滤的项目。

Answer 1

在我看来，错误是以下几行：

    } else if(this.selectedRow >= this.people.length - 1){

或者在你拥有this.people.length的所有行中更具体。

别忘了。即使你没有显示它们，人们的长度也不会变长。这意味着只有当您通过所有“已过滤”的人时，selectedRowIndex才会重置为0。所以你必须得到过滤后的人而不是所有人的长度。

如果您需要此实施方面的帮助，请不要犹豫。但我认为你可以自己管理。

我这样做的方法是：

使管道可注射。
将其注入组件
创建新属性（filteredPeople）
this.filteredPeople = this.pipe.transform(this.people, /* PIPE Parms */)
调整html以显示filteredPeople
调整所有使用了people.length with filteredPeople.length

希望这有帮助。

按向下或向上箭头键

1 个答案: