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, 然后设置宽度自适应即可。