html 引用DOM元素

a7qyws3x 于 2023-11-15 发布在其他

关注(0)|答案(1)|浏览(131)

ngAfterViewInit(): void {
    this.getDropdownDimensions();
}
getDropdownDimensions() {
    this.dropdownHeight = this.ngSelectOuter?.nativeElement?.clientHeight;
    this.dropdownWidth = this.ngSelectOuter?.nativeElement?.clientWidth;
}

字符串
我面临的问题是，我有条件地显示和隐藏一个基于复选框的选择，所以当我打开该页面，如果复选框被选中，则显示为一切正常，但一旦我取消选中复选框，然后选中它，我可以看到该复选框，但我无法获得其宽度。我得到一个错误，即clientWidth未定义。

Html

来源：https://stackoverflow.com/questions/77444977/reference-to-dom-element

1条答案

按热度按时间

tjvv9vkg1#

带组件属性

做ngSelectOuter是public。

public ngSelectOuter: Elementref<unknown>

字符串
然后在模板文件中设置宽度和高度（如果没有值，可以设置默认值）：

<select 
   [style.width.px]="ngSelectOuter?.nativeElement?.clientWidth || 100"
   [style.height.px]="ngSelectOuter?.nativeElement?.clientHeight || 100">
</select>

型

使用Getters

或者你可以写一个get函数，并以更可读的方式编写它：

public get selectOuterWidth() {
   return ngSelectOuter?.nativeElement?.clientWidth || 100;
}
public get selectOuterHeight() {
   return ngSelectOuter?.nativeElement?.clientHeight || 100;
}

<select 
   [style.width.px]="selectOuterWidth"
   [style.height.px]="selectOuterHeight">
</select>

展开查看全部

赞(0）回复(0）举报 2023-11-15

我来回答

html 引用DOM元素

1条答案

带组件属性

使用Getters

相关问题

热门标签

最新问答