如何在单击按钮时通过角度 7 进行自动对焦

Question

我的表格中有一些文本框来自循环。最初这些文本框被禁用，单击编辑按钮后它将被启用。直到现在工作正常。但我想在第一行的第一个文本框中自动对焦我点击编辑按钮。我尝试使用自动对焦属性，但它不起作用。任何人都可以帮助我。这是下面的代码

app.component.html

<div class="container">
    <h2>Basic Table</h2>
    <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
    <div><button (click)="enable()">Edit</button> </div>
    <table class="table border">

        <tbody>
            <tr *ngFor="let row of groups;let i = index">
                <td> <input autofocus [disabled]='toggleButton' type="text" value="{{row.name}}"> </td>
                <td> <input [disabled]='toggleButton' type="text" value="{{row.items}}"> </td>
                <td> <button (click)="addRow(i)">Add</button></td>
            </tr>
        </tbody>
    </table>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    public toggleButton: boolean = true;
  ngOnInit() {

  }
  groups=[
     {
       "name": "pencils",
       "items": "red pencil"
     },
     {
       "name": "rubbers",
       "items": "big rubber"
     },
     {
       "name": "rubbers1",
       "items": "big rubber1"
     },
  ];
  addRow(index): void {
    var currentElement = this.groups[index];
    this.groups.splice(index, 0, currentElement);
 }
 enable(){
       this.toggleButton = false
    }
  //console.log(this.groups);
}

Answer 1

你应该 @ViewChild 装饰器选择第一个文本框，然后使用 NativeElement 的焦点方法来聚焦。 请注意，setTimeout 用于给出布尔值的执行时间。

工作示例 https://stackblitz.com/edit/angular-table-focus