如何使用 Angular8 将焦点设置在具有动态生成的元素 ID 的材质输入上

Question

我有一个带有许多动态生成的输入的GUI。

我可以像这样分配动态生成的 id 的输入：

<ul>
<li *ngFor="#item of items" >
<mat-form-field>
<input type=number attr.id={{item.name}}}
</mat-form-field>
</li>
</ul>

我希望能够将焦点设置在具有动态名称的特定输入上。这可能吗？

因为 id 是动态生成的，所以我们不能像这样使用 @viewchild 方法：

@ViewChild('usernameField') usernameField: ElementRef;
ngAfterViewInit() {
this.usernameField.nativeElement.focus();
}

在材料文档中提到了焦点方法和 FocusOptions，但没有示例：

https://material.angular.io/components/input/overview

Answer 1

您可以使用模板逻辑根据条件(例如，id 是某个值(应用模板引用变量，然后允许使用 ViewChild。

如果您还不知道要聚焦的元素的 id，并且该 id 是动态生成的，而不是随机生成的，那么它很可能是可预测的。换句话说，您可以预先确定要聚焦的组件的 id。

最简单的情况是，当您知道 id 是什么时，但也有可能 id 以外的其他东西决定了焦点，例如顺序或位置。下面是如何将焦点应用于 NgFor 列表中的最后一个元素的示例：

<ul>
<li *ngFor="let item of items; last as isLast" >
<mat-form-field>
<input *ngIf="isLast; else noFocus" #usernameField type=number attr.id={{item.name}}>
</mat-form-field>
</li>
</ul>
<ng-template #noFocus>
<input type=number attr.id={{item.name}}>
</ng-template>
@ViewChild('usernameField') usernameField: ElementRef;
ngAfterViewInit() {
setTimeout(() => this.usernameField.nativeElement.focus());
}

当然，NgIf 中使用的表达式可以是任何内容，包括简单的值比较，例如：

<input *ngIf="item.name === 'usernameField'; else noFocus" #usernameField type=number attr.id={{item.name}}>