如何自定義彈出框與其離子選擇的寬度相同

Question

我對 ion-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 時，我總是收到“無法讀取 null 的屬性 'style'”的錯誤

誰能幫我解決這個問題，或者是否有另一種方法來設置彈出列表項的寬度？

Answer 1

我設法通過使用 Css 變量來分配彈出框寬度，在 app.scss 中定義它並在我的 ts 文件中分配它們

在 app.scss

:popwidth { --width: 0px; }

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

文件.ts

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