Angular2 可編輯的(editable)select

最近項目非常急，需要用到可編輯的select，jquery應該有很多插件，但是boss要求盡量不要在ng2中直接使用jquery，不要直接使用jquery操作dom。

其實github上已經有ng2可用的庫primeng

對于一個初入前端的我來說短時間内研究明白primeng有點困難，于是我就取巧用了個互動不是很好的方法實作了這個功能，使用ngModel對input和select綁定同一個變量，就實作了input和select值之間的同步

CSS：

.editable{
position: relative;
}
.editable > select{
    width: 400px;
    height:30px;
}
.editable > input{
    position:absolute;
    outline:none;
    width:380px;
    height:30px;
    left:1px;
    top:1px;
    border-bottom:0px;
    border-right:0px;
    border-left:0px;
    border-top:0px;
}
           

HTML

<div class="editable" >
  <select [(ngModel)]="num">
    <option *ngFor="let item of nums" [value]='item'>{{item}}</option>
  </select>
  <input [(ngModel)]="num" />
</div>
           

TS

private nums:number[];
private num:number;
ngOnInit() {
    this.nums=[1,2,3,4,5,6]
    this.num=1;
}