Angular 8 Материал - Настройте стиль выбранной опции в соответствии с вашими потребностями

Question

У меня есть элемент опций выбора, у каждой опции есть два текста, номер карты и метка, показывающая баланс вашей карты, я хочу поместить их в одну строку с пробелом, как на этом изображении:

Я пробовал display flex , но это не имело никакого эффекта.

<mat-form-field>
    <select matNativeControl required>
        <option value="default">Select your card</option>
        <option value="card_number">
            1234 4567 8901 2345
            <span class="label">1,200000$</span>
        </option>
    </select>
</mat-form-field>

Answer 1

попробуйте использовать Basi c mat-select

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option>
        <div> 4567 8901 2345</div>
        <div class="label">1,200000$</div>
    </mat-option>
  </mat-select>
</mat-form-field>

и в css:

::ng-deep .mat-option-text{
  display: flex!important;
    justify-content: space-between;

}

См. Код стекаблика

Примечание! Я думаю, вы не можете иметь дело с выбранным значением