我有一个角度自动完成树组件,我对自动完成面板宽度有疑问。
我有两个要求可以单独解决,但不能一起解决:
- 一旦内容比面板宽,面板应该会增长。我用过
[panelWidth] = "auto"
这个,它工作得很好。 - 面板应具有主机输入的最小宽度。也可以为此使用 panelWidth ,但随后我失去了第一点的功能。
从更改垫子自动完成宽度?) 我看到我可以使用[panelWidth] = "auto"
.
我知道我可以使用 css 样式
.mat-autocomplete-panel{min-width: "300px"}
,但不知道如何获取特定输入的宽度。
所以我求助于javascript。我在文档中看到 AutocompletePanel 公开了面板 ElementRef,但是无论我做什么,这个值似乎都是未定义的?获得这个价值的正确方法是@ViewChild
?我有以下在opened
事件上运行的代码。
<mat-autocomplete #autocomplete (opened)="opened()" [panelWidth]="auto" #auto="matAutocomplete">
@ViewChild("auto") autocomplete: MatAutocomplete;
@ViewChild("autoTreeInput") autoTreeInput: ElementRef;
opened = () => {
setTimeout(()=>{
let p = this.autocomplete.panel?.nativeElement; //always null because panel is undefi
console.log("opened", p, this.autocomplete);
if (!p ) return
p.style.minWidth =
this.autoTreeInput.nativeElement.getBoundingClientRect().width + "px";
},1000)
};