循环中的Angular2下拉选择

时间:2017-07-27 08:30:07

标签: angular dropdown

我有两个数组serviceOptionsreactivePackages。针对每个服务选项,有一系列反应包(在下拉列表中显示)。

现在我在循环中动态创建下拉列表。我的问题是如何在表单提交中获取选定的下拉选项? (这是形式的一部分)

 <label *ngFor="let service of serviceOptions">
    <b>{{service.serviceName}}</b>
    <br /><br />
    <md-select placeholder="Select Package" formControlName="packageName" size="30">
      <ng-container *ngFor="let package of (reactivePackages | async)">
        <md-option *ngIf="service.serviceId==package.serviceId" [value]="package" (click)="hello()">
          {{ package.packageName }}
        </md-option>
      </ng-container>
    </md-select>
    <br />  <br />
  </label>

1 个答案:

答案 0 :(得分:1)

    You can achieve it by saving the selected option in a variable. 

    You need to follow just two steps.
    1. Create a method on component.ts that will store the selected option.
    Example- 

      selectedData(event: any) {
       this.storedData = event.target.value;
      }

    2. Call this method on html.
    Example-

 <select class="form-control" (change)="selectedData($event)">
 <option *ngIf="service.serviceId==package.serviceId" [value]="package">{{ package.packageName }}</option>
</select>

3.Then simply call a method that will save the selected data.