在多选的情况下,从角度垫选择中隐藏复选框?

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部分。
我已使用“选择事件”以将选项定义为“选择事件”。但是,我正在启用复选框。我不希望下拉菜单中的第一个选项启用复选框。有什么办法可以让我先选择无复选框?

在此处输入图片说明

Qua*_* VO 7

每个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)

  • 它已被弃用,但没有任何实用的替代方案 (2认同)