Angular：如何使用打字稿变量控制 Select 元素的“Size”属性？答案

【问题标题】：Angular: How to control Select element's "Size" attribute using typescript variables?Angular：如何使用打字稿变量控制 Select 元素的“Size”属性？
【发布时间】：2021-08-26 21:00:30
【问题描述】：

我正在尝试将 size="6" 替换为 size="this.groupsList.length" 但它不起作用。如何做到这一点？

<select name="groups" size="6">
   <option *ngFor="let group of groupsList">{{group.name}}</option>
</select>

背景：

我这样做是因为如果元素的数量>“大小”，则选择标签会提供自己的滚动条，但是由于我需要改用 ngx-perfect-scrollbar，所以我需要更改“大小”属性动态的。由于我使用的是 ngx-perfect-scrollbar，所以我需要隐藏 select 标签的滚动条，但这样做也会隐藏一些组名（如果“size”属性小于 groupsList 的长度。）

【问题讨论】：

标签： html css angular select option

【解决方案1】：

你只需要这样做：

<select name="groups" [attr.size]="groupsList.length">
   <option *ngFor="let group of groupsList">{{group.name}}</option>
</select>

【讨论】：

【解决方案2】：

为了解决这个问题，我在我的 .ts 文件中添加了以下内容：

const selectTag = document.getElementById('groupsListSelect');
selectTag.setAttribute("size",this.groupsList.length+"")

并在 html 中添加了“id="groupsListSelect”：

<select id="groupsListSelect" name="groups" size="1">
    <option *ngFor="let group of groupsList">{{group.name}}</option>
</select>

它会在 groupsList 初始化之后用上面的打字稿代码覆盖 1 的大小。

【讨论】：