Question

我正在使用ngFor生成按钮列表，当我加载网站时，第一个生成的按钮已经聚焦，直到我点击其他地方...

<div align="center" class="buttonDiv" *ngFor="let tamplates of caseService.availableTaskTemplates"> <button mat-button class="button" *ngIf="tamplates.contentType == 1" (click)="createTask(tamplates.taskType)"> {{ tamplates.headerText }} </button> </div>

这是一张图片： https://ibb.co/imG7sy

我该怎么做才能“关注”按钮？

Answer 1

您可以在HTML中使用自动对焦属性。

自动对焦：加载页面后关注元素

将其添加到HTML中的虚拟元素，以便无法关注元按钮。

例如：

<label autofocus> </label>

----------------另一种解决方案-------------------

在渲染视图后，您可以在javascript中使用blur（）方法。

在AfterViewInit里面

@Component({
    selector: 'my-cmp', 
    templateUrl: `my-cmp.html`
})
class MyComponent implements AfterViewInit {
  @ViewChild('buttonsList') buttonsList;

  ngAfterViewInit() {
    // execute blur on the first child of the list.
    this.buttonsList.nativeElement.firstChild.blur();
  }
}

在你的模板中：

<div #buttonsList *ngFor='let item of items'>
    <button meta-button> {{item}} </button>
</div>

* ngFor生成的mat-button专注于加载

1 个答案: