css - 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>

尝试在 mat-select 中通过 css 修改宽度，但无济于事。

请参阅附件..非常感谢任何建议

添加呈现的 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>

:

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