角度：选择后具有可见MatIcon的MatSelect

Question

制作组件标签

使用图标制作下拉菜单-一切正常

但是在选择了一个值之后，我看到了文本，而不是图标

我的代码：

*。ts

export class MarkComponent {
  @Input() control: MarkDTO = null;
  @Input() marks: MarkDTO[] = [];
  @Output() change: EventEmitter<MarkDTO> = new EventEmitter<MarkDTO>();
}

*。html

<mat-form-field>
  <mat-select placeholder="Метка" formControlName="control">
    <mat-select-trigger *ngIf="control">
      <mat-icon>home</mat-icon>&nbsp;{{control.name}}
    </mat-select-trigger>
    <mat-option [value]="null">
  <mat-icon [ngStyle]="{'color': 'white'}">home</mat-icon>&nbsp;Не выбрана
</mat-option>
    <mat-option *ngFor="let mark of marks" [value]="mark">
      <mat-icon [ngStyle]="{'color': mark.color}">home</mat-icon>&nbsp;{{mark.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

我看到了this解决方案，但没有帮助

结果：

控制台中没有错误

UPD：

StackBlitz example

Answer 1

我发现溶液（不使用FormGroup）

Working example

如果FormGroup有人需要的解决方案 - 我可以用它帮助