Angular2 md-select retirer la flèche après avoir sélectionné l'option

Question

J'ai une valeur sélectionnée dans la sélection md mais la "flèche" de la sélection md s'affiche après la sélection.

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> 

Essayé modifiant la largeur par tapis dans css-select, mais en vain.

S'il vous plaît voir les suggestions de attached..any très appréciés

Ajout rendu le code 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

Comme vous pouvez le voir dans le code rendu, il y a la durée qui ajoute que la flèche déroulante.

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

Donc, mon idée est de supprimer la classe mat-select-arrow sur la sélection ou si selectedClaimType a une valeur à l'initialisation.

J'ai créé une référence de md-select en utilisant @ViewChild et l'utiliser pour supprimer la classe.

Exemple simplifié:

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