Как использовать пользовательский макет для элементов компонента Select?

Question

Я бы хотел добавить некоторые элементы HTML к опциям Выбрать компонент. Вот пример:

<mat-select [(ngModel)]="items">
  <mat-option *ngFor="let item of ($items | async)" [value]="item.id">
    <span>{{item.name}}</span>
    <br>
    <small>{{item.description}}</small>
  </mat-option>
</mat-select>

Хотя это работает и выглядит тривиально, с этим подходом есть небольшая проблема. Если выбрана опция Выберите , компонент {{item.name}}{{item.description}}, например, «Кухонный ножПрекрасный нож ручной работы для вашей кухни». но мне нужно использовать только имя элемента в качестве Выберите значение компонента.

Кто-нибудь знает, как справиться с этим?

Answer 1

Я могу только предложить обходной путь для этого. Я создал элемент ввода и отключил его, поэтому материал не будет отображать этот элемент как текст для отображения.

Демо: Stackblitz