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

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

我正在尝试将 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 的长度。)

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

您只需要这样做:

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