将重点放在Angular上动态创建的输入上

问题描述

我正在使用* ngFor 动态创建输入.因此，我想在最后创建的输入上设置 focus .有人可以帮我吗?

I'm dynamically creating inputs with *ngFor. So, I would like to set focus on the last created input. Could someone help me?

这是我的模板代码:

                <div class="col-6">
              <mat-card class="dataItens">
                <mat-card-header>
                  <mat-card-title>Itens de dados</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                  <section *ngFor="let dataItem of elementaryProcess.dataItens; let i = index;">
                    <mat-form-field class="input-dataItens">
                      <input matInput [(ngModel)]="dataItem.name" name="dataItem{{ i }}" id="dataItem{{ i }}"
                             autocomplete="off"
                             [ngModelOptions]="{standalone: true}" class="input-dataItens"
                             (keyup.arrowDown)="dataItemOnKeyUp()"/>
                    </mat-form-field>
                    <button type="button" mat-icon-button (click)="removeDataItem(i)">
                      <mat-icon>delete</mat-icon>
                    </button>
                  </section>
                </mat-card-content>
                <mat-card-actions>
                  <form>
                    <!-- Add button -->
                    <button mat-stroked-button color="primary" type="button" (click)="addDataItem()">Adicionar
                    </button>
                    <!-- ngFor code -->
                  </form>
                </mat-card-actions>
              </mat-card>
            </div>

这是我用来添加输入的功能:

And this is the function I use to add the inputs:

  addDataItem() {
    this.elementaryProcess.dataItens.push(new DataItem());
  }

推荐答案

使用ViewChildren和ViewChildren.changes.参见 SO

Using ViewChildren and ViewChildren.changes. See this SO

我使用箭头键更新了堆叠闪电战以集中精力.它比创建一个函数要简单

I updated the stackblitz to focus using arrows keys. It's so simple than create a function

@ViewChildren('input') inputs: QueryList<ElementRef> //<--here declare our "inputs"
focusElement(index:number){
    const input=this.inputs.find((x,i)=>i==index)
    if (input)
      input.nativeElement.focus()
  }

在.html文件中，我们是keydown.arrowUp和keydown.arrowDown

And in the .html we ise keydown.arrowUp and keydown.arrowDown

<p *ngFor="let el of elements;let i=index">
  <input #input (keydown.arrowUp)="focusElement(i-1)"
                (keydown.arrowDown)="focusElement(i+1)" >
</p>

已更新，就像下面的维克多(Victor)所说的那样，当您没有物品时会出现问题.这是因为我忘记检查是否有输入.因此，当订阅 inputs.changes 时，我们需要对其进行检查

Updated, as Victor comments below, there's a problem when you has no items. It's because I forget check if there are inputs. So, when subscribe to inputs.changes we need check it

this.inputs.changes.pipe(takeWhile(()=>this.alive)).subscribe(() => {
  if (this.inputs.length)  //<--add this "if"
    this.inputs.last.nativeElement.focus()
})

这篇关于将重点放在Angular上动态创建的输入上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！