Я использую 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

6
dprophecyguy 13 Мар 2018 в 12:56

2 ответа

Лучший ответ

У каждого mat-option есть mat-pseudo-checkbox для обработки стилей флажков (я проверял его с помощью инструментов разработчика Chrome). Попробуйте это (Angular 5, Материал 2):

::ng-deep .mat-option:first-child .mat-pseudo-checkbox{ display: none; }
8
Quan VO 13 Мар 2018 в 10:21

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

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

-2
saidutt 20 Фев 2019 в 18:59