gpt4 book ai didi

javascript - 如何使用 ngIf 将输入的焦点放在表单字段中

转载 作者:行者123 更新时间:2023-12-02 19:09:41 25 4
gpt4 key购买 nike

我遇到了一个问题,我想在我的代码中将焦点放在条件输入上基于可观察的数据。在我的示例中,我只是在 ngOnInit() 中将 bool 值设置为 true

export class InputOverviewExample implements OnInit {
bool: boolean;

@ViewChild("input1", { static: true }) input1: MatInput;
@ViewChild("input2", { static: true }) input2: MatInput;

ngOnInit() {
this.bool = true;
this.input1.nativeElement.focus();
this.input2.nativeElement.focus();
}
}

而且我注意到当 mat-form-field 被调节时焦点不起作用。

<form class="example-form">
<h3>Without *ngIf :</h3>
<mat-form-field appearance="outline" class="example-full-width">
<input matInput #input1 placeholder="Auto focus" value="Test_input1" />
</mat-form-field>

<h3>With *ngIf :</h3>
<mat-form-field appearance="outline" class="example-full-width" *ngIf="bool">
<input matInput #input2 placeholder="Auto focus" value="Test_input2" />
</mat-form-field>
</form>

StackBlitz link

有人想办法解决这个问题

谢谢

最佳答案

您需要了解 ViewChild {static:true} 和 {static:false} 以及 {read}

因此,首先将您的 ViewChild 定义为

@ViewChild("input1", { static: false,read:ElementRef }) input1: ElementRef;
@ViewChild("input2", { static: false,read:ElementRef }) input2: ElementRef;

static:false 使 Angular 检查是否在 *ngIf 下

read:ElementRef 使您的“input1”和“input2”被视为 ElementRef,而不是 MatInput

您需要了解的第二件事是 Angular 的工作原理。 Angular 执行所有操作并刷新应用程序,所以如果你写

this.bool = true;
this.input2.nativeElement.focus(); //<--this.input2 is undefined

this.input2 是未定义的,因为 Angular 没有重绘应用程序,所以你需要用 setTimeout 括起来 - 你可以像对 Angular 说的那样考虑 setTimeout “嘿,不要忘记刷新应用程序后,你需要做这个其他说明”- 或使用 ChangeDetectorRef .

所以

  ngOnInit() {
this.bool = true;
setTimeout(()=>{
this.input1.nativeElement.focus();
this.input2.nativeElement.focus();
})
}

关于javascript - 如何使用 ngIf 将输入的焦点放在表单字段中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64495986/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com