Я использую 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. Но я получаю это с включенным флажком. Я не хочу, чтобы первый вариант в раскрывающемся списке был включен. Могу ли я выбрать первый вариант без флажков?
2 ответа
У каждого mat-option есть mat-pseudo-checkbox для обработки стилей флажков (я проверял его с помощью инструментов разработчика Chrome). Попробуйте это (Angular 5, Материал 2):
::ng-deep .mat-option:first-child .mat-pseudo-checkbox{ display: none; }
Пожалуйста, предоставьте другие сведения об используемой вами версии.
Вы можете сделать это разными способами. Угловой материал имеет класс модели выбора, который позволит вам управлять всеми этими значениями. иначе вы можете установить флажок в * ngIf = "alreadySelected" что-то вроде этого и связать это bool с вашей логикой ts.
En Español