如何防止材料图标文字显示在材料选择中

Question

当选择了垫选项时，如何防止显示材料图标文本？

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

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