Angular2：将下拉选择绑定到我的intefrace中

我正在编写一个包含两个文本表单和一个按钮的表单：

<form noValidate (ngSubmit)="onSubmit(login)" [formGroup]="login">
Username:<br> <input type="text" formControlName="username"><br>
<div class="error"
    *ngIf="login.get('username').hasError('required') && login.get('username').touched">
    Username required</div>

Password:<br> <input type="password" formControlName="password"><br>
<div class="error"
    *ngIf="login.get('password').hasError('required') && login.get('password').touched">
    Password required</div>

<br> <input type="submit" value="Login" [disabled]="login.invalid">

以及我的登录界面：

export interface LoginInterface {
  username: String;
  password: String;
}

现在我已经编写了一个用于显示下拉列表（在internet上找到）的组件，所以我也想将所选值绑定到我的登录界面中。这是组件

export class DropdownosComponent {
   private list = [
      { id: 1, name: 'ONE' },
      { id: 2, name: 'TWO' },
      { id: 3, name: 'THREE'}
   ];
   private current: number = 1;

   private setCurrent(id: number): void {
      this.current = id;
   }
   public getCurrent(): string {
      return this.list.find((item: any) => item.id == this.current).name;
   }
}

这是一个模板

<select #select [(ngModel)]="current"
(change)="setCurrent(select.value)">
   <option *ngFor="let item of list" [value]="item.id">{{item.name}}</option>
</select>

现在，如果我把它放到我的LoginComponent模板中，我怎样才能正确地将选择绑定到LoginInterface下拉列表中

<select #select [(ngModel)]="current"
(change)="setCurrent(select.value)">
   <option *ngFor="let item of list" [value]="item.id">{{item.name}}</option>
</select>

export interface LoginInterface {
  username: String;
  password: String;
  dropdown: String;
}