mat-select not pre selecting a value when mat-option has async content

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When the ngModel of a mat-select is populated on page load the mat-select should have that option selected.

What is the current behavior?

mat-select does not show the current selected option on page load if a mat-option has some async behaviour, in my case the translate pipe:

        <mat-option *ngFor="let option of options" [value]="option.value">
          {{ option.label | translate }}
        </mat-option>

The current selected option is shown the moment the mat-select gets focus.

What are the steps to reproduce?

Please have a look at the following StackBlitz example: https://stackblitz.com/edit/angular-material2-issue-async-mat-option-label?file=app%2Fpet-select-async%2Fpet-select-async.component.ts

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

material beta 12 angular 4.4.3

[jraadt]

A terrible hack to use with dynamically loaded options that may or may not contain the currently selected item, but you want to show the select item info in the select trigger, is to always have the selected item as an option that is hidden.

<mat-option [value]="select.value" *ngIf="select.value" style="display: none">{{select.value}}</mat-option>

Or you could use [compareWith] and have it always return true as long as there is at least 1 option in your select box. Not sure which one is nastier.

[vovikdrg]

For now my workaround is like this Get labels

this.translateService.get(['Dancers', 'DancerIndexArchive']).safeSubscribe(this, (value) => {
     this.options.push({ key: 'dancers', value: value.Dancers });
     this.options.push({ key: 'dancerIndexArchive', value: value.DancerIndexArchive });
   });

Bind in Template

 <mat-form-field>
      <mat-select formControlName="Type">
        <mat-option [value]="option.key" *ngFor="let option of options">
          {{ option.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>