如何对HTML文件中的<input />标记的[autofocus]属性（属性）使用属性绑定到Angular中的布尔变量

Question

你好，我是Angular的新手，
我想基于boolean变量的值将重点放在输入标签上。也就是说，如果变量的值为“ true”，则将焦点设置在输入标签上，如果它为false，则将其设置为false。

我在下面共享了我的代码：

app.component.html

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'focusChange';
  change = false;
  renderer = Renderer2;
  onValueChange(value)
  {
    console.log(this.change);
    console.log("value changed",value);
    this.change = true;
    console.log(this.change);
  }

}

app.component.ts

dt.Columns.Add("Breadth ", typeof(double));
dt.Columns.Add("Height ", typeof(double));.
dt.Columns.Add("IsMeasured ", typeof(bool));

我还附上了屏幕截图：

因此，我想要的是每当我从下拉列表中选择/更改值时，焦点便会自动移至下一个输入框。

它对于[disabled]属性无效，但对于[autofocus]属性却无效。

请帮助我找出该怎么办或我做错了什么。

Answer 1

您要使用@ViewChild('yourInput') searchBox;并在#yourInput中添加<input #yourInput [disabled]="change" type="text">参考变量

然后您可以通过使用

setTimeout(() => this.yourInput.nativeElement.focus(), 0);作为您逻辑的一部分。