Question

我正在使用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部分。
我使用了选择事件以将选项定义为选择事件。但是我启用了复选框。我不希望下拉列表中的第一个选项启用复选框。有没有办法我可以有没有复选框的第一个选项？

Answer 1

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

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

Answer 2

我需要在 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; }

Answer 3

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

您可以通过多种方式进行操作。角材料具有选择模型类，该模型类允许您使用所有这些值进行操作。否则，您可以将复选框设置为* ngIf =“ alreadySelected”，例如将该bool链接到您的ts逻辑。

在多次选择的情况下隐藏角度mat-select的复选框？

3 个答案: