nz-select下拉框自適應寬度

數據如下：

  listOfData=[
    {
      "name":"標題1",
      "id":"1"
    },
    {
      "name":"標題12",
      "id":"2"
    },
    {
      "name":"標題123",
      "id":"3"
    },
    {
      "name":"標題1234",
      "id":"4"
    },
    {
      "name":"標題12345",
      "id":"5"
    },
  ]

<nz-select 

>
<nz-option
  *ngFor="let item of listOfData"
  [nzLabel]="item.name"
  [nzValue]="item.id"
>
</nz-option>
</nz-select>

使用nz-select時，如果沒有指定寬度就會是下面的樣子：

如果設置寬度是80px,那么就會變成這樣：

<nz-select 
style="width: 80px;"
>
<nz-option
  *ngFor="let item of listOfData"
  [nzLabel]="item.name"
  [nzValue]="item.id"
>
</nz-option>
</nz-select>

如果寬度設置成300px，就會變成下面這樣：

可以看出，如果寬度設置過長就浪費了很多空間，如果設置了過短就無法顯示部分數據。所以我們需要設置自適應寬度。

代碼如下：

<nz-select  
[nzDropdownStyle]="{
  width: 'fit-content',
  'min-width': '80px'
}"
style="min-width: 80px;"
>
<nz-option
  *ngFor="let item of listOfData"
  [nzLabel]="item.name"
  [nzValue]="item.id"
>
</nz-option>
</nz-select>

通過設置最小寬度80px, 然后設置寬度自適應即可。