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在墊選但無濟於事修正寬度。

請參閱attached..any建議高度讚賞

添加渲染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 class="mat-select-arrow"></span>

所以，我的想法是，以消除選擇類mat-select-arrow或者selectedClaimType對初始值。

我使用@ViewChild創建了md-select的引用並使用它來刪除該類。

簡單的例子：

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