在使用打字稿的形式之間使用tabindex

Question

我想通過使用打字稿來實現輸入字段之間的製表符。我有以下代碼...

的index.html

<ion-fab bottom right fab-size=60px> 
      <button ion-fab icon-only class="btn-nav" id="down" > 
      <ion-icon name="arrow-down"></ion-icon> 
      </button> 
      <button ion-fab icon-only class="btn-nav" id="up" > 
      <ion-icon name="arrow-up" ></ion-icon> 
      </button> 
     </ion-fab> 

<form [formGroup]="itemForm" (submit)="addItem()" novalidate> 
    <ion-row class="questions"> 
     <ion-col col-sm-2 col-md-8> 
    <ion-item> 
     <ion-label stacked class="ques-title">General Name</ion-label> 
     <ion-input formControlName="gen_name" class="input-field" type="text" tabindex="1" 
     [class.invalid]="!itemForm.controls.gen_name.valid && itemForm.controls.gen_name.dirty"> 
     </ion-input> 
    </ion-item> 
    <ion-item class="error-message" 
     *ngIf="!itemForm.controls.gen_name.valid && itemForm.controls.gen_name.dirty"> 
     <p> 
     Problem with the general name. No Special characters 
     </p> 
    </ion-item> 
     </ion-col> 
. 
. 
. 
</form> 

index.ts

public pos: number = 0; 
    public navUp: any = document.getElementById('up'); 
    public navDown: any = document.getElementById('down'); 


    setFocus() { 
    document.querySelector('input[tabindex="' + this.pos +'"]').focus(); 
    } 

    navUp.onclick() { 
    this.pos = this.pos-1; 
    this.setFocus(); 
    } 

    navDown.onclick() { 
    this.pos = this.pos+1; 
    this.setFocus(); 
    } 

但是，當我編譯它，它讓我看到下面的錯誤

• 類型'Element'中不存在Typescript錯誤屬性'focus'。
• Typescript錯誤重複的標識符'navUp'。
• Typescript Error重複函數的實現。
• Typescript錯誤重複的標識符'navDown'。
• Typescript Error';'預期。

Answer 1

我不熟悉離子，但我知道一些關於TypeScript的東西可能有幫助。

示例代碼：

class Example { 
    public pos: number = 0; 

    constructor() { 
     var navUp = document.getElementById('up'); 
     var navDown = document.getElementById('down'); 

     navUp.onclick =() => { 
      this.pos = this.pos - 1; 
      this.setFocus(); 
     } 

     navDown.onclick =() => { 
      this.pos = this.pos + 1; 
      this.setFocus(); 
     } 
    } 

    setFocus() { 
     (<HTMLInputElement>document.querySelector('input[tabindex="' + this.pos + '"]')).focus(); 
    } 
} 

1. 並不是所有的元素都有focus方法 - 但如果你說「我知道該字符串'input[...總會給我舉打字稿有點類型斷言的HTMLInputElement - 它會很高興

2. 我已修復點擊處理程序以便它們編譯，但請閱讀MDN guidelines on adding click handlers，因爲它推薦addEventListener。