it-swarm.com.ru

Скрыть флажок от angular mat-select в случае множественного выбора?

Я использую 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.
Я использовал Select Events, чтобы определить опцию как Select Events. Но я получаю это с включенным флажком. Я не хочу, чтобы в первой опции в раскрывающемся меню был установлен флажок. Есть ли способ, которым я могу иметь первый вариант без флажков?

enter image description here

4
dprophecyguy

Каждый mat-option имеет mat-pseudo-checkbox для обработки стилей флажков (я проверил это с помощью инструментов chrome dev). Попробуйте это (Angular 5, Material 2):

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

Пожалуйста, предоставьте другие подробности о версии, которую вы используете.

Вы можете сделать это несколькими способами .. Угловой материал имеет класс модели выбора, который позволит вам манипулировать всеми этими значениями .. В противном случае вы можете установить флажок на * ngIf = "уже выбранный" что-то подобное и .__ связать это bool с вашей логикой.

0
saidutt