使用下拉列表显示多个选择项目

Question

我想创建一个使用select选项字段的列表，并将其显示在一个表中。我想添加一个删除按钮来删除seledted，但我还没有创建该方法。 问题是我总是得到最后一个选定的项目。

component.ts

types = ['début', 'intermédiaire', 'fin'];
selectedType: string;
selectedState: string;
stateType: Array<StateType>;
// get the selected type from dropdown list
onTypeSelect(event: any) {
  this.selectedType = event.target.value;
  console.log(this.selectedType);
}

// get the selected state from dropdown list
onStateSelect(event: any) {
  this.selectedState = event.target.value;
  console.log(this.selectedState);
}
addStateType() {
  let stateType = new StateType(this.selectedState, this.selectedType);
  let stateTypes: Array<StateType> = [];
  stateTypes.push(stateType);
  console.log(stateTypes);
}

component.html

<div class="form-group">
  <div class="field">
    <label for="exampleSelect1">Etat : </label>
    <select align="left" #selectElem class="form-control" (change)="onStateSelect($event)" multiple>
      <option *ngFor="let state of statesName">
        {{state.name}}
      </option>
    </select>
  </div>

  <div class="field">
    <label for="exampleSelect1">Type : </label>
    <select align="right" #selectElem class="form-control" (change)="onTypeSelect($event)" multiple>
      <option *ngFor="let type of types">
        {{type}}
      </option>
    </select>
  </div>

  <div class="field">
    <button class="btn btn-success" (click)="addStateType()" title="add state">
      <i class="fa fa-plus"></i>
    </button>
  </div>
  <div>
    <table>
      <tr *ngFor="let stateType of stateTypes">
        <td>{{selectedState}}</td>
        <td>{{selectedType}}</td>
        <button title="delete">
          <i class="fa fa-trash"></i>
        </button>
      </tr>
    </table>
  </div>
</div>