在多行 mat-select 上隱藏第二行

Question

我的任務是創建一個具有以下樣式的下拉菜單

代碼是

<mat-select >
    <mat-option *ngFor="let type of source"
                style="min-height: 48px; line-height: normal; height: auto; padding: 10px 20px;" [value]="type.value">
        <div class="u-textSize14">{{type.displayName}}</div>
        <div class="u-textSize12">{{type.hint}}</div>
    </mat-option>
</mat-select>

當我 select 一個選項時，選中的項目顯示為

“Standard UrlDomainName.com”，有什么辦法可以在選擇項目時隱藏第二行/提示並使其僅在墊子 select 打開時出現

Answer 1

要自定義您選擇的選項，請在<mat-select>中使用<mat-select-trigger> > ：

<mat-select [formControl]="foo">
    <mat-select-trigger>{{foo.value ? foo.value[0] : ''}}</mat-select-trigger>
    <mat-option *ngFor="let item of items" [value]="item.val">{{item.label}} - {{item.desc}}</mat-option>
</mat-select>