Question

我正在使用Angular 6，但下拉菜单遇到问题。

例如，当下拉列表处于焦点状态并且用户按下键“ I”时，当用户按下“ I”时，它将选择以该字母开头的第一个选项（在这种情况下，它将从包含状态的数组中选择爱达荷州）。再次，它应该选择列表中以“ I”（伊利诺伊州）开头的下一个元素，但它会保留在同一元素中。

我正在使用this dropdown select module，并使用以下标记将其实现为html：

<ng-select [items]="this.stateNames" [(ngModel)]="shippingInfo.shippingAddress.state" #state="ngModel" name="state" required placeholder="Select State" bindLabel='long' bindValue='short' placeholder="Select a State"[searchable]="false" [clearable]="false"></ng-select>

我尝试使用keypress和change以编程方式进行迭代事件添加

(change)="this.stateChange($event, shippingInfo.shippingAddress.state)" (keypress)="this.keypressEvent($event, shippingInfo.shippingAddress.state)"

到ng-select标签。处理程序函数如下所示：

currentKey = '';
stateIndex = 0;

keypressEvent(e, currentState) {
  console.log('\n\nK E Y   P R E S S');
  console.log('key pressed: ', e.key);
  if (e.key === this.currentKey.toLowerCase()) {
    console.log('same key');
    this.stateIndex++;
  }
  console.log('currentState: ',currentState);
  const currentIndex = this.stateNames.findIndex((element)=>{
    return element.short === currentState
  });
  if (this.stateNames.length > this.stateIndex) {
    if (this.stateNames[this.stateIndex].long[0].toLowerCase() === e.key) {
      this.shippingInfo.shippingAddress.state = this.stateNames[this.stateIndex].short;
      console.log('new state: ', this.shippingInfo.shippingAddress.state);
    }
  }
}

stateChange(e, currentState) {
  console.log('\n\nS T A T E   C H A N G E');
  this.currentKey = currentState[0];
  console.log('currentState: ', currentState);
  console.log('key stored: ', this.currentKey);
  this.stateIndex = this.stateNames.findIndex(x =>  x.short === currentState);
  console.log('State index: ', this.stateIndex);
  console.log('actual value: ', this.shippingInfo.shippingAddress.state);
}

我注意到一些奇怪/奇怪的行为：

当我快速多次按下相同的键时，stateChange不会触发，并且所选项目会按预期进行更改，但是当我停下来然后再次按下相同的键时，它将进入第一个状态带有那封信。
当我按下相同的键（例如'I'）时：第一次按预期选择爱达荷州，第二次keypress触发短暂选择伊利诺伊州（这就是我想要的），但是然后stateChange也会触发并将其设置回爱达荷州。

this.stateNames是一个数组，其中包含带有状态名称的对象，如下所示：

[
{ "short": "AL", "long": "Alabama"  },
{ "short": "AK", "long": "Alaska"  },
{ "short": "AZ", "long": "Arizona" },
{ "short": "AR", "long": "Arkansas" },
{ "short": "CA", "long": "California" },
{ "short": "CO", "long": "Colorado" },
{ "short": "CT", "long": "Connecticut" },
{ "short": "DE", "long": "Delaware" },
{ "short": "DC", "long": "District Of Columbia" },
{ "short": "FL", "long": "Florida" },
{ "short": "GA", "long": "Georgia" },
{ "short": "HI", "long": "Hawaii" },
{ "short": "ID", "long": "Idaho" },
{ "short": "IL", "long": "Illinois" },
{ "short": "IN", "long": "Indiana" },
{ "short": "IA", "long": "Iowa" },
{ "short": "KS", "long": "Kansas" },
{ "short": "KY", "long": "Kentucky" },
{ "short": "LA", "long": "Louisiana" },
{ "short": "ME", "long": "Maine" },
{ "short": "MD", "long": "Maryland" },
{ "short": "MA", "long": "Massachusetts" },
{ "short": "MI", "long": "Michigan" },
{ "short": "MN", "long": "Minnesota" },
{ "short": "MS", "long": "Mississippi" },
{ "short": "MO", "long": "Missouri" },
{ "short": "MT", "long": "Montana" },
{ "short": "NE", "long": "Nebraska" },
{ "short": "NV", "long": "Nevada" },
{ "short": "NH", "long": "New Hampshire" },
{ "short": "NJ", "long": "New Jersey" },
{ "short": "NM", "long": "New Mexico" },
{ "short": "NY", "long": "New York" },
{ "short": "NC", "long": "North Carolina" },
{ "short": "ND", "long": "North Dakota" },
{ "short": "OH", "long": "Ohio" },
{ "short": "OK", "long": "Oklahoma" },
{ "short": "OR", "long": "Oregon" },
{ "short": "PA", "long": "Pennsylvania" },
{ "short": "RI", "long": "Rhode Island" },
{ "short": "SC", "long": "South Carolina" },
{ "short": "SD", "long": "South Dakota" },
{ "short": "TN", "long": "Tennessee" },
{ "short": "TX", "long": "Texas" },
{ "short": "UT", "long": "Utah" },
{ "short": "VT", "long": "Vermont" },
{ "short": "VA", "long": "Virginia" },
{ "short": "WA", "long": "Washington" },
{ "short": "WV", "long": "West Virginia" },
{ "short": "WI", "long": "Wisconsin" },
{ "short": "WY", "long": "Wyoming" }
]

用户按下键时，遍历“下拉”元素

0 个答案: