gpt4 book ai didi

angular - PrimeNG 多选自动对焦

转载 作者:行者123 更新时间:2023-12-03 16:48:24 32 4
gpt4 key购买 nike

在 Angular v7 项目中使用 PrimgNG v7.1.3。
在一个简单的组件中实现了多选 ( https://www.primefaces.org/primeng-7.1.3/#/multiselect )。
需要在页面加载时设置焦点。
下面的解决方案适用于下拉但不适用于多选:
在 HTML 中:<p-dropdown #someDropdown></p-dropdown>在组件中:

import { Dropdown } from 'primeng/dropdown';
@ViewChild('someDropdown') someDropdown: Dropdown;

this.someDropdown.applyFocus();
但是对于Multiselect,它会抛出这种方法无效的错误。
尝试了此 SO 链接中针对“ngIf 中的控制”提到的第一个答案,仍然没有运气: primeng: Setting focus on control
也检查了 PrimeNG 文档和用户指南,但没有提到聚焦功能。
后来也试了下。它都没有奏效。
this.someMultiSelect.focus();
this.someMultiSelect.applyFocus();

this.someMultiSelect.el.focus();
this.someMultiSelect.el.applyFocus();

this.someMultiSelect.el.nativeElement.focus();
this.someMultiSelect.el.nativeElement.applyFocus();

this.someMultiSelect.containerViewChild.focus();
this.someMultiSelect.containerViewChild.applyFocus();

this.someMultiSelect.containerViewChild.nativeElement.focus();
this.someMultiSelect.containerViewChild.nativeElement.applyFocus();
Blitz : https://stackblitz.com/edit/primeng-multiselect-autofocus
请建议。
任何帮助表示赞赏。

最佳答案

您可以通过 ViewChild 获取元素并执行此技巧以使其突出显示。
像这样:
组件

import { MultiSelect } from 'primeng/multiselect';

export class AppComponent implements AfterViewInit {
name = 'Angular';

@ViewChild('someDropdown') someDropdown: MultiSelect; // <--- you need to import this from PrimeNG Library

ngAfterViewInit() {
setTimeout(() => {
this.someDropdown.containerViewChild.nativeElement.click();
this.someDropdown.hide();
}, 300);

}

这是 Stackblitz 示例:
https://stackblitz.com/edit/ngprime-multiselect-efpy6z?embed=1&file=src/app/app.component.ts

关于angular - PrimeNG 多选自动对焦,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62957634/

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