Question

我真的在寻找这个问题的解决方案两天而且找不到东西......基本上我想要的是从我的<select>元素中选择选项：

<select name="selectedCars" [ngModel]="selectedCars" multiple>
    <option *ngFor="let car of cars" [ngValue]="car">{{car.Model}}</option>
</select>

我认为它会绑定到selectedCars: Car[]，我可以做这样的事情来显示选定的值：

<h2>Selected:</h2>
<ul>
    <li *ngFor="let selectedCar of selectedCars">{{selectedCar.Model}}</li>
</ul>

文档中没有任何关于此的内容。

Answer 1

将[ngModel]更改为[(ngModel)]（双向绑定），只要您在下拉列表中选择/取消选择并选择选项，就会更新selectedCars数组。

<select name="selectedCars" [(ngModel)]="selectedCars" multiple>
    <option *ngFor="let car of cars" [ngValue]="car">{{car.Model}}</option>
</select>

否则，请在下面显示的select元素中添加以下属性，它与[(ngModel)]相同。

(ngModelChange)="selectedCars=$event"

Answer 2

您应该使用[(ngModel)]

<select name="selectedCars" [(ngModel)]="selectedCars" multiple>
          <option *ngFor="let car of cars" (click)="clickedOption()" [ngValue]="car">
          {{car.name}}</option>
      </select>

clickedOption(){
    console.log(this.selectedCars)
  }

您可以在单击选项时简单地记录元素，如上面的方法

所示

<强> LIVE DEMO

Angular如何获得选定的选项（多个）

2 个答案: