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

Angular2 md-select选择选项

1 个答案: