оптимизировать CSS на выпадающих кнопках, использующих ngIf

Question

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

Разве это не может быть написано чище? Потому что теперь я на самом деле создаю 2 кнопки, но видна только одна ... Я пробовал это, но застрял при добавлении цвета фона CSS в код кнопки.

<div class="block-options">
 <div class="dropdown">
  <!-- Options -->
   <button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="si si-settings"></i></button>
    <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
    <!-- Disable buttons based on selected packages -->
     <div *ngIf="checkIfValidVersion()">
       <button class="dropdown-item js-swal-confirm" (click)="createMajors()">Create major version</button>
     </div>
     <div *ngIf="!checkIfValidVersion()">
       <button [disabled]="!checkIfValidVersion()" style = "background-color:grey; color:black" class="dropdown-item js-swal-confirm">Create major version</button>
     </div>
   </div>
 </div>
</div>

Answer 1

Хорошо, вам нужно написать класс стилей для вашей кнопки, который вступит в силу, если кнопка отключена

Что-то похожее на это поможет:

.my-button:disabled {
  background-color: grey;
  color: black
}

и ваш HTML будет выглядеть так:

<div class="block-options">
  <div class="dropdown">
    <!-- Options -->
    <button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false"><i class="si si-settings"></i></button>
    <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
      <!-- Disable buttons based on selected packages -->
      <button class="dropdown-item js-swal-confirm my-button" (click)="createMajors()"
        [disabled]="!checkIfValidVersion()">Create major version</button>
    </div>
  </div>
</div>

Связанная тема здесь

Answer 2

Вы дублируете код. Вам просто нужна одна строка, которая уже есть. В зависимости от условия в вашей кнопке будет установлен атрибут disable . Не помещайте CSS-код на уровне кнопок.

<button [disabled]="!checkIfValidVersion()" class="dropdown-item js-swal-confirm">Create major version</button>

Теперь установите CSS-код на уровне кнопок для сценария отключения:

button[disabled=disabled], button:disabled {
   background-color:grey;
   color:black;}

Это наиболее чистый способ.

Answer 3

<button class="dropdown-item js-swal-confirm" [class.disabledStyle] ="!checkIfValidVersion()"> Create major version </button>

Приведенный выше код добавит имя класса "disabledStyle" в существующий класс, если функция вернет true.

disabledStyle {
 background: grey;
}