Angular: 如何使用 typescript 变量控制 Select 元素的 "Size" 属性？

Question

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

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

背景：

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

Answer 1

为了解决这个问题，我将以下内容添加到我的 .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 的大小。

Answer 2

您只需要这样做：

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

Angular: 如何使用 typescript 变量控制 Select 元素的 "Size" 属性？

Angular: How to control Select element's "Size" attribute using typescript variables?

html

css

angular

select

option