如何从角度 6 中的多个选择下拉列表中获取多个值?

我的代码如下,

<select multiple [(ngModel)]="myModelProperty" name="category" (change)="catFilter($event.target.value);hName($event.target.value);" class="form-control">
        <option>Select Cat</option>
        <ng-container *ngFor="let type of cat">
            <ng-container *ngIf="type.Record.Pre!=undefined"> 
            <ng-container *ngIf="type.Record.prefname">
            <option [value]="type.Record.pre">{{type.Record.prefname}}</option>
            <ng-container *ngFor="let e of cat">
            <ng-container *ngIf="e!=type">
                <ng-container *ngIf="e.Record.Pre == type.Record.Pre">
                <option [value]="type.Record.subcat">&nbsp;&nbsp;&nbsp;{{ e.Record.subcat }}</option>
                </ng-container>
            </ng-container>
           </ng-container>
           </ng-container>
           </ng-container>
           </ng-container>
    </select>

在我的 ts 文件中,

   catFilter(selectedCat:string){
      this.selectedCat = selectedCat;
   }

我想选择多个值并从下拉列表中获取选定的值。谁能告诉我如何在 Angular 6 中做到这一点?我关注了许多链接,但它们向我展示了如何获得单个选项的值。但我需要获得多个选项的值。

stack overflow How to get multiple values from multiple select drop down in angular 6?
原文答案

答案:

作者头像

首先,您在 Object key 中写了一个错误的 <option [value]="type.Record.pre">{{type.Record.prefname}}</option> ,因为您看到 [value]="type.Record.pre" 应该是 [value]="type.Record.Pre"

第二个 [(ngModel)] 是一种双向数据绑定,这意味着当您从 Component's TS File 设置默认选择时,可以直接从 <select></select> 获取所选值

我厌倦了遵循您的数据模型并得出了这个结果

https://stackblitz.com/edit/angular-isquyp?file=src%2Fapp%2Fapp.component.html