Angular 2 Material`md-select`带有自定义模板

Question

我正在寻找使用Angular 2素材md-select的自定义模板的方式，但似乎我只能使用默认文本选择。我正在尝试实现这样的下拉列表：

在选择md-option之一后，我需要在md-select和md-option中设置此类模板。有没有办法通过Angular 2材质的md-select获得以下结果？

Answer 1

这与@Camil的答案相同，但清理了一下。我还使用flex-layout来表示flexbox指令。

  <mat-option class="customer-search-result"
              *ngFor="let option of searchResults" [value]="option">

       <div fxLayout="column">

           <span class="name">{{ option.fullName }}</span>
           <span class="email">{{ option.email }}</span>

       </div>

   </mat-option>

和sass

mat-option.customer-search-result
{
    line-height: normal;

    .name {
        font-weight: bold;
    }

    .email {
        color: gray;
    }
}

请务必mat-option而不是.mat-option，这样您就不必担心影子DOM了。

请注意，插入了<span class='mat-option-text'>，您也可能需要重新设置。

Answer 2

我刚遇到同样的问题。看起来内容按预期工作，但它只是mat-option不想自动调整大小。对我有用的解决方案就是将带有所需内容的div转换为指定mat-option height 。 Possiblt你也想修改行高这样：

 <mat-form-field>
    <input type="text" placeholder="Select" aria-label="subject" matInput formControlName="subjectInput" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let item of items | async" style="height: 60px; line-height: normal;">
       <!-- your content here -->
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>