Angular2 md-select 在 selecting 选项后删除箭头
Angular2 md-select remove arrow after selecting option
我有一个来自 md-select 的值 select 但来自 md-select 的 "arrow" 仍然显示在 selection 之后。
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>
如您在呈现的代码中所见,存在添加下拉箭头的 span。
<span class="mat-select-arrow"></span>
所以,我的想法是在选择时删除 class mat-select-arrow
或者如果 selectedClaimType
在初始化时有值。
我使用 @ViewChild
创建了 md-select
的引用,并用它来删除 class。
简化示例:
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;
}
}
}
我有一个来自 md-select 的值 select 但来自 md-select 的 "arrow" 仍然显示在 selection 之后。
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>
如您在呈现的代码中所见,存在添加下拉箭头的 span。
<span class="mat-select-arrow"></span>
所以,我的想法是在选择时删除 class mat-select-arrow
或者如果 selectedClaimType
在初始化时有值。
我使用 @ViewChild
创建了 md-select
的引用,并用它来删除 class。
简化示例:
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;
}
}
}