Как предотвратить отображение текста значка материала при выборе материала - PullRequest
0 голосов
/ 09 октября 2018

Как предотвратить отображение текста значка материала при выборе параметра mat?

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()
});

enter image description here enter image description here

Обновление

Установка триггера выбора мата - это то, что я хочуно я не могу заставить привязку данных работать в FormGroup.

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Существует компонент с именем 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>
0 голосов
/ 09 октября 2018

попробуйте

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