dpr*_*guy 6 html javascript css angular-material angular
我正在使用角度材质选择创建一个下拉菜单,其中提供了选择多个值的选项。
<accordion [showArrows]="true" class="programstyle">
<accordion-group heading="EVENTS" [isOpened]="true">
<div class="">
<mat-form-field class="width100">
<mat-select class="width100" placeholder="Events" [(ngModel)]="studentInput.programType" (change)="filter()" id="programTypeValueId" name="programTypeValueId">
<mat-option disabled>Select Events</mat-option>
<mat-option *ngFor="let program of programs" [value]="program.campusEventId">{{program.eventName}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</accordion-group>
<accordion-group heading="SKILLS">
<div class="">
<mat-form-field class="width100">
<mat-select multiple class="width100" placeholder="Select Skills" [(ngModel)]="studentInput.skills" (change)="filter()" id="skillTypeValueId" name="skillTypeValueId">
<mat-option disabled>Select Skills</mat-option>
<mat-option *ngFor="let skill of skills" [value]="skill.lookupValueId">{{skill.lookupValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</accordion-group>
<accordion-group heading="INTERESTS">
<div class="">
<mat-form-field class="width100">
<mat-option>Select Interests</mat-option>
<mat-select multiple class="width100" placeholder="Select Interests" [(ngModel)]="studentInput.interest" (change)="filter()" id="interestTypeValueId"
name="interestTypeValueId">
<mat-option *ngFor="let interest of interests" [value]="interest.lookupValueId">{{interest.lookupValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</accordion-group>
</accordion>
Run Code Online (Sandbox Code Playgroud)
这是HTML部分。
我已使用“选择事件”以将选项定义为“选择事件”。但是,我正在启用复选框。我不希望下拉菜单中的第一个选项启用复选框。有什么办法可以让我先选择无复选框?
每个mat-option都有一个mat-pseudo-checkbox处理复选框的样式(我从chrome dev工具检查过)。试试这个(角度5,材料2):
::ng-deep .mat-option:first-child .mat-pseudo-checkbox{ display: none; }
Run Code Online (Sandbox Code Playgroud)