如何防止材质图标文本出现在材质选择中

Question

如何防止在选择MAT-OPTION时显示材料图标文本？

组件.html

<form [formGroup]="autoPopulatePOCForm">
   <mat-form-field class="savedPocWrapper">
      <mat-select class="form-control" formControlName="poc" id="poc" ngDefaultControl disableRipple disableOptionCentering>
        <mat-select-trigger>
          {{poc.lastName}}, {{poc.firstName}} ({{poc.email}})
       </mat-select-trigger>
        <mat-option class="poc-mat-option" value="">Choose</mat-option>
        <mat-option class="poc-mat-option" *ngFor="let poc of savedPOCs" [value]="poc">
          <button class="poc-mat-button" type="button" (click)="deletePOC(poc.email)" mat-icon-button>
             <mat-icon class="poc-mat-icon">
                <i class="material-icons">delete</i>
              </mat-icon>
          </button>
          {{poc.lastName}}, {{poc.firstName}} ({{poc.email}})
        </mat-option>
      </mat-select>
    </mat-form-field>
</form>

组件.ts

this.autoPopulatePOCForm = this.formBuilder.group({
  poc: new FormControl()
});

更新

设置 mat-select-trigger 是我想要做的，但我无法让数据绑定在 FormGroup 中工作。

Answer 1

试试这个

<mat-icon class="poc-mat-icon">
     <i class="material-icons">delete</i>
</mat-icon>

Answer 2

有一个组件叫mat-select-trigger

<mat-form-field class="savedPocWrapper">
  <mat-select class="form-control" formControlName="poc" id="poc" ngDefaultControl disableRipple disableOptionCentering="false">
     <mat-select-trigger>
        <button>
           <mat-icon>delete</mat-icon>
        </button>
       {{selectionText}}
     </mat-select-trigger>
   <mat-option class="poc-mat-option" value="">Choose</mat-option>
   <mat-option class="poc-mat-option" *ngFor="let poc of savedPOCs" [value]="poc">
     <button class="poc-mat-button" type="button" (click)="deletePOC(poc.email)" isIconButton mat-icon-button>
      <mat-icon class="poc-mat-icon" aria-hidden="true">delete</mat-icon>
     </button>
          {{poc.lastName}}, {{poc.firstName}} ({{poc.email}})
   </mat-option>
 </mat-select>
</mat-form-field>