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

Question

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

在选择我的 md-option 之一后，我需要在 md-option 和 md-select 中使用这样的模板。有没有办法通过 Angular 2 material 的 md-select?

获得以下结果

Answer 1

我刚遇到同样的问题。内容似乎按预期工作，但它只是不想自动调整大小的垫选项。对我有用的解决方案只是将包含所需内容的 div 嵌入并 指定 mat-option 高度 。可能你还想像这样修改行高：

 <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>

Answer 2

这与@Kamil 的回答相同，但进行了一些整理。我还使用 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'>，您可能还需要重新设置样式。

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

Angular 2 Material `md-select` with custom template

angular-material

angular-material2

angular