如果输入嵌套在angular中的Html li标记中，当达到限制时如何聚焦下一个输入？

<ul>
  <li *ngFor="let input of inputs">
    <input [(ngModel)]="input.value" (keyup)="onKeyup(input)">
  </li>
</ul>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  inputs = [
    { value: '' },
    { value: '' },
    { value: '' }
  ];

  @ViewChild('inputRefs') inputRefs: ElementRef[];

  onKeyup(input: any) {
    const index = this.inputs.indexOf(input);
    if (input.value.length >= 10 && index < this.inputs.length - 1) {
      const nextInput = this.inputRefs[index + 1];
      nextInput.nativeElement.focus();
    }
  }
}