如何從角度 6 中的多個選擇下拉列表中獲取多個值？

Question

我的代碼如下，

<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 中做到這一點？ 我關注了許多鏈接，但它們向我展示了如何獲得單個選項的值。 但我需要獲得多個選項的值。

Answer 1

首先，您在<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