如何自定义弹出窗口与其 ion-select 的宽度相同

Question

我对 ion-select 组件有疑问，这是它的弹出项的宽度。它与其母离子的大小不匹配-select.

我尝试使用如下的 onclick 事件来解决这个问题：

[(ngModel)]="value" [id]="id" class="ps-select" [okText]="okText" [cancelText]="cancelText" [multiple]="false" [interface]="popover" [placeholder]="placeHolderTrans"> {{ item.description }}

ts 文件：

onClick(event){ this.divwidth = event.srcElement.clientWidth; this.cssclass = document.querySelector('.popover-content') as HTMLElement; console.log("sudfasu",this.divwidth) ; this.cssclass.style.width = this.divwidth; }

但是当我尝试用 class "popover-content" 捕捉 div 我总是收到“无法读取 属性 'style' of null”

的错误

谁能帮我解决这个问题，或者是否有其他方法可以设置弹出列表项的宽度？

Answer 1

我设法通过使用 Css 变量分配弹出窗口宽度，在 app.scss 中定义了它 并在我的 ts 文件中分配它们

在app.scss

:popwidth { --width: 0px; }

[dir="ltr"] .select-popover .popover-content{ width: var(--width); }

file.ts

onClick(event){
this.divwidth = event.srcElement.clientWidth; let popwidth = document.documentElement; popwidth.style.setProperty('--width', this.divwidth + "px"); }