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

时间:2018-08-15 09:46:45

标签: html angular angular6

我的代码如下,

<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;
   }

我想选择多个值并从下拉列表中获取选定的值。有人可以告诉我如何在角度6中做到这一点吗?我跟踪了许多链接,但是它们向我展示了如何获得单个选项的价值。但是我需要获取多个选项的值。

1 个答案:

答案 0 :(得分:0)

第一 您在<option [value]="type.Record.pre">{{type.Record.prefname}}</option>中输入了错误的对象密钥 如您所见[value]="type.Record.pre"应该是[value]="type.Record.Pre"

第二 [(ngModel)]是两种方式的数据绑定,这意味着当您从组件的TS文件设置默认选择并可以直接从<select></select>

获取选择的值时

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

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