在多选的情况下隐藏角度垫选择的复选框？答案

【问题标题】：Hide checkbox from angular mat-select in case of multiple select?在多选的情况下隐藏角度垫选择的复选框？
【发布时间】：2018-08-21 12:40:23
【问题描述】：

我正在使用 angular-material select 创建一个下拉菜单，其中提供了选择多个值的选项。

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

这是 HTML 部分。
我使用了选择事件来将选项定义为选择事件。但是我在启用复选框的情况下得到了这个。我不希望下拉列表中的第一个选项启用复选框。有什么办法可以让我选择不带复选框的第一个选项？

【问题讨论】：

您能否将我的回答标记为已接受？谢谢。

标签： javascript html css angular angular-material

【解决方案1】：

每个 mat-option 都有一个 mat-pseudo-checkbox 来处理复选框样式（我从 chrome 开发工具中检查了它）。试试这个（Angular 5，Material 2）：

::ng-deep .mat-option:first-child .mat-pseudo-checkbox{ display: none; }

【讨论】：

::ng-deep 在 Angular 6 或更高版本中可能已被弃用。
它已被弃用，但没有任何实用的替代方案
>> 它已被弃用，但没有任何实用的替代方案这不是真的！你可以使用encapsulation: ViewEncapsulation.None...

【解决方案2】：

请提供有关您正在使用的版本的其他详细信息。

您可以通过多种方式做到这一点。 Angular 材质具有选择模型类，可让您使用所有这些值进行操作。否则，您可以将复选框设置为 *ngIf="alreadySelected" 类似的东西将该布尔值链接到您的 ts 逻辑。

【讨论】：

版本与回答问题有什么关系？看来您可以在没有该信息的情况下为该问题提供一个答案...

【解决方案3】：

我需要在 mat 多选包装组件中使用“创建新项目”选项，所以 Quan VO' 评论有效，我将其扩展到工作示例：

*.ts

@Input() public enableAddOption: boolean;
@Output() public onAddNew = new EventEmitter<void>();

*.html

<mat-select
  [formControl]="values"
  [multiple]="isMultiple"
>
  <mat-option *ngIf="enableAddOption" class="hide-checkbox" [value]="null" (click)="onAddNew.emit()">
    <b>{{ enableAddOption ? 'Create new' : '' }}</b>
  </mat-option>
  <mat-option *ngFor="let option of options" [value]="option.id">
     <span>{{ option.title }}</span>
  </mat-option>
</mat-select>

*.scss：

::ng-deep .hide-checkbox .mat-pseudo-checkbox { display: none; }

【讨论】：

【解决方案4】：

::ng-deep 已弃用，因此我们可以在 styles.css 中编写此类

  .mat-option:last-child .mat-pseudo-checkbox  { 
  display: none; 
}

【讨论】：