angular select样式调整、后台数据交互

前段时间需要用到下拉列表select，但是默认样式效果不太符合项目

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

下拉列表没展开的时候，样式就是这种，高度很小，框也不好看。

然后我的项目中是把它放在一个input框里面的，非常不协调，就想着利用bootstrap把它的样式改一改，在bootstrap中用到最多的是form表单中的form-control
于是乎

1. 利用包管理器npm安装bootstrap
   npm install bootstrap
2. 在全局样式中引入 @import "~bootstrap/scss/bootstrap";
3. 在select标签上加上class=“form-control”

就这样，select样式就变好看了很多，在项目中效果是这样，点击时，边框会有蓝色阴影，但是好看又不突兀，非常推荐bootstrap中这个样式，input之类的标签都可以用

这样就算是总体实现了要求的样式，但是还需要与后台交互，借助于响应式表单来处理用户输入、获取默认数据
附上代码（其中formControlName="person_limit"用表单处理用户输入、默认值的初始化，value属性绑定与服务端交互的数据，下拉列表展示的是name，比如服务器返回id为-1，name下拉列表默认选中的就是不限`)
.html

<form [formGroup]="checkForm">
  <select class="form-control" formControlName="person_limit">
     <option *ngFor="let item of limits" [value]="item.id"> {{item.name}} </option>
  </select>
</form>

.ts

 limits: any[] = [{ id: -1, name: '不限' },
  { id: 0, name: '0' }, { id: 1, name: '1' },
  { id: 2, name: '2' }, { id: 3, name: '3' },
  { id: 4, name: '4' }, { id: 5, name: '5' }];