Angular2 md-select удалить стрелку после выбора опции

Question

У меня есть значение, выбранное из md-select, но "стрелка" из md-select по-прежнему отображается после выбора.

HTML

<div class="form-group spaces" style="width: 50%">
   <md-select placeholder="Claim Type"  name="selectedClaimType"   
       ngDefaultControl formControlName="selectedClaimType"  
       [(ngModel)]="selectedClaimType" [formControl]="claimType" >
          <md-option *ngFor="let c of ClaimTypes"                     
          [value]="c.ClaimTypeId">{{c.ClaimDescription}}</md-option>
   </md-select>

</div>

Пытался изменить ширину через css в mat-select, но безрезультатно.

Пожалуйста, смотрите прикрепленные.. любые предложения высоко ценятся

Добавление визуализированного HTML-кода

  <md-select class="mat-select ng-tns-c2-1 mat-primary ng-valid ng-dirty ng-
    touched" formcontrolname="selectedClaimType" name="selectedClaimType" 
    ngdefaultcontrol="" placeholder="Type" role="listbox" tabindex="0"
    aria-label="Claim Type" aria-labelledby="" aria-required="false" 
    aria-disabled="false" aria-invalid="false" aria-owns="md-option-0
    md-option-1 md-option-2">
    <div class="mat-select-trigger" cdk-overlay-origin="">
    <span class="mat-select-placeholder ng-trigger
     ng-trigger-transformPlaceholder mat-floating-placeholder" 
     style="opacity: 1; width: 99px; top: -22px; left: -2px; 
     transform: scale(0.75);">Type </span><!---->
    <span class="mat-select-value ng-tns-c2-1">
    <span class="mat-select-value-text">High Voltage Battery</span> </span>
    <span class="mat-select-arrow"></span> 
    <span class="mat-select-underline"></span></div><!---->
 </md-select>

Answer 1

Как вы можете видеть в отрендеренном коде, есть span, который добавляет стрелку раскрывающегося списка.

<span class="mat-select-arrow"></span>

Итак, моя идея состоит в том, чтобы удалить класс mat-select-arrow на выбор или если selectedClaimType имеет значение при инициализации.

Я создал ссылку на md-select с помощью @ViewChild и использовать его для удаления класса.

Упрощенный пример:

HTML:

<div class="form-group spaces" style="width: 50%">
   <md-select placeholder="Claim Type"  name="selectedClaimType"
              [(ngModel)]="selectedClaimType"
              #select (change)="removeArrow()">
          <md-option *ngFor="let c of ClaimTypes"                     
          [value]="c.ClaimTypeId">{{c.ClaimDescription}}</md-option>
   </md-select>
</div>

TS:

import {Component, ViewChild, OnInit } from '@angular/core';
import {MdSelect} from '@angular/material';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample implements OnInit{
  @ViewChild('select') select: MdSelect;

  ClaimTypes = [
    {ClaimTypeId: 'steak-0', ClaimDescription: 'Steak'},
    {ClaimTypeId: 'pizza-1', ClaimDescription: 'Pizza'},
    {ClaimTypeId: 'tacos-2', ClaimDescription: 'Tacos'}
  ];

  selectedClaimType;

  constructor(){
    this.selectedClaimType = this.ClaimTypes[0].ClaimTypeId;
  }

  ngOnInit(){
    if(this.selectedClaimType != undefined){
      this.select.trigger.nativeElement.children[1].classList = null;
    }
  }

  removeArrow(){
    if(this.select.trigger.nativeElement.children[2].className == 'mat-select-arrow'){
       this.select.trigger.nativeElement.children[2].classList = null;
    }
  }
}

Plunker demo