ローカルテンプレート変数を使用して入力にフォーカスを設定しても、IOSでは機能しませんか？

Question

ngFor内の特定のinput要素にフォーカスを設定すると、IOSデバイスでは機能しません。他のすべての場所でうまく機能します。

HTML

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let item of [1,2,3,4]; let i = index"> 
     <button type="button" (click)="show = i; input.focus()">Click to show and set focus</button> 
     <input #input *ngIf="show == i" type="text" > 
    </div> 
    `, 
}) 

活字体：

export class App { 
    show = -1; 
    constructor() { 
    } 
} 

plunker

Answer 1

あなたがすることができます。このコードは、クリックボタンの入力にフォーカスを設定することになっています以下を使用してください：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let item of [1,2,3,4]; let i = index"> 
     <button type="button" (click)="display(i)">Click to show and set focus</button> 
     <input #theInput *ngIf="show === i" type="text" > 
    </div> 
    `, 
}) 
export class App { 
    show = -1; 

    @ViewChild('theInput') 
    private theInput; 

    constructor() { 
    } 

    display(i) { 
    this.show = i; 
    setTimeout(() => this.theInput.nativeElement.focus(), 0); 
    } 
} 

のsetTimeoutの使用よりもよりエレガントなものがあるかどうかはわからないんだけど、入力のみ、showの変更によってトリガーされる変化検出後にDOMに追加されているのでtheInputです未定義（または以前に表示された入力）になります。

デモ：http://plnkr.co/edit/A0ZO0hyuR61nUdiSvzFj?p=preview

編集：AfterViewChecked：

export class App { 
    show = -1; 
    shouldFocus = false; 

    @ViewChild('theInput') 
    private theInput; 

    constructor() { 
    } 

    display(i) { 
    this.show = i; 
    this.shouldFocus = true; 
    } 

    ngAfterViewChecked() { 
    if (this.shouldFocus) { 
     this.theInput.nativeElement.focus(); 
     this.shouldFocus = false; 
    } 
    } 
} 

更新のデモを参照してください：http://plnkr.co/edit/lXTRDGLKwkAAukEQGQjq?p=preview