角度2材質設計のドロップダウンで値を事前に選択するにはどうすればよいですか？

Question

angle2のマテリアルデザインのドロップダウンで値を事前に選択しようとしています。私は以下のことを行っていますが、それは動作しません。

<label *ngFor="let service of serviceOptions"> 
    <b>{{service.serviceName}}</b> 
    <br /><br /> 

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

助けていただければ幸いです。

Answer 1

valueプロパティバインディングを<md-option>内に追加して、選択した値をservice.selectedPackageに割り当てます。 [(ngModel)]="service.selectedPackage"があるため、その値はpackageのバインディングプロパティと一致する必要があります。

md-optionからpackage.packageNameまでをservice.selectedPackageと仮定してバインドする例は、同様の値を保持しています。

<md-option [value]="package.packageName" 
      *ngIf="service.serviceId==package.serviceId" 
      (click)="selectServicePackage(service, package)"> 
    {{ package.packageName}} 
</md-option> 

Plunker demo