javascript — динамический CSS на элементе ion-option

Динамический CSS на элементе ion-option

Я использую ion-select компонент от Ionic (v3). Я хотел бы сделать отступ или применить margin-left: 30px; к некоторым пунктам в списке. Элементы в списке, к которым я хотел бы применить стиль, начинаются с дефиса '-' . Но когда я добавляю какие-либо классы в ion-option , они удаляются, когда Ionic создает элемент.

Я пытался использовать [ngClass] и [class] , но все добавленные классы просто удаляются. Я попытался обернуть ion-option в div и добавить к ней стиль, который также удаляется (как и весь контейнерный div)

Вот мой источник HTML:

  {amp}lt;ion-select mode="ios"[selectOptions]="categorySelectOptions"{amp}gt; {amp}lt;ion-option *ngFor='let category of displayCategories'{amp}gt; {{category}} {amp}lt;/ion-option{amp}gt; {amp}lt;/ion-select{amp}gt; 

Вот элемент вывода, который я сейчас получаю в браузере. Я хотел бы иметь возможность динамически применять класс к элементу кнопки на основе значения category во внутреннем html ion-option элементе ion-option выше.

 {amp}lt;button class="alert-tappable alert-radio alert-radio-button alert-radio-button-md alert-radio-button-default alert-radio-button-default-md" ion-button="alert-radio-button" role="radio" aria-checked="false" id="alert-input-0-3"{amp}gt; {amp}lt;span class="button-inner"{amp}gt; {amp}lt;div class="alert-radio-icon"{amp}gt; {amp}lt;div class="alert-radio-inner"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="alert-radio-label"{amp}gt; - birds {amp}lt;/div{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;div class="button-effect"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/button{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector