如何在angular4中按回车键关注下一个输入字段

如何在angular4中按回车键关注下一个输入字段
      从’@ angular / core’导入{Component,OnInit,ElementRef,ViewChild,Directive,Renderer,AfterViewInit};

@Component({
    selector: 'cbody',templateUrl: './cbody.component.html',styleUrls: ['./cbody.component.css']
  })  
  export class CbodyComponent  implements  OnInit,AfterViewInit  {
    constructor(public renderer: Renderer,private el:ElementRef) {           
      }
  @ViewChild('ft01') infocus: ElementRef;

    ngOnInit(){};
    ngAfterViewInit() {
            this.renderer.invokeElementMethod(
          this.infocus.nativeElement,'focus');                     
          }

    keytab(event:any){      
          console.log(event.keyCode );  
          console.log(this.dataloops );     
    }

   dataloops=[
  { "name":"csdn","url":"www.runoob.com" },{ "name":"google","url":"www.google.com" },{ "name":"ifeng","url":"www.weibo.com" }
  ]

  }

 <p>
   cbody works!
 </p>


 <div>
 <ul *ngFor="let dataloop of dataloops">
    <li  >{{dataloop.name}}<input type="text" name="intext" [(ngModel)]="dataloop.url" #ft01 (keyup.enter)="keytab($event)"/></li>
 </ul>
 </div>

解决方法

你正在以错误的方式使用* ngFor,它会重复放置的元素.
你需要在li元素上设置* ngFor.

<ul>
    <li *ngFor="let dataloop of dataloops">
       {{dataloop.name}}
        <input type="text" name="intext" 
        [(ngModel)]="dataloop.url" #ft01 (keyup.enter)="keytab($event)"/>  
    </li>
 </ul>

现在更新.ts文件如下

keytab(event){
    let element = event.srcElement.nextElementSibling; // get the sibling element

    if(element == null)  // check if its null
        return;
    else
        element.focus();   // focus if not null
}

这段代码应该可以正常工作