Angular 2 - 如何显示多选下拉列表的选定选项？

<select #selectedfiscalyear multiple> 
     <option *ngFor="let fiscalyear of fiscalyears" value = {{fiscalyear.value}}> 
                {{fiscalyear.value}} 
     </option>
 </select> 
<button class="btnView">Click</button>

where

fiscalyears = [
  {
    "year": "fiscalYear",
    "value": "2018"
  },
  {
    "year": "fiscalYear",
    "value": "2017"
  },
  {
    "year": "fiscalYear",
    "value": "2016"
  },
  {
    "year": "fiscalYear",
    "value": "2015"
  },]

那么，如何在按钮单击事件上获取多个选定的值（例如 2018、2017、2016 等）？

方法一。

在这种情况下，您应该使用ngModel。那么您甚至不需要按钮操作。

@Component({
  selector: 'my-app',
  template: `
    <select #selectedfiscalyear multiple [(ngModel)]="selectedVal"> 
      <option *ngFor="let fiscalyear of fiscalyears"> 
           {{fiscalyear.value}} 
      </option>
    </select> 
  <h1>{{ selectedVal }}</h1>
  `
})

笨蛋代码 https://plnkr.co/edit/8AUTzkbbuQPkf66kw6MZ?p=preview

方法2.

In case，您确实想在单击按钮时调用该函数，请使用以下代码：

@Component({
  selector: 'my-app',
  template: `
    <select #selectedfiscalyear multiple [(ngModel)]="selectedVal"> 
       <option *ngFor="let fiscalyear of fiscalyears"> 
           {{fiscalyear.value}} 
       </option>
    </select> 
    <button class="btnView" (click)="selectedVal.length ? select() : null">Click</button>
    <input id="result">
  `,
})

export class App {
  constructor() {}

  select(){
    document.getElementById('result').value = this.selectedVal;
  }
}

笨蛋代码2 https://plnkr.co/edit/zAa2enpEnEZFSyuuqH1Q?p=preview