html - 如何使用 [ngClass] 或 customClass 更改标签集导航丸背景颜色

Question

我正在使用 angular-7， 我想根据验证更改选项卡的颜色，我在检查时间表是否有效的地方添加了 customClass，如果它无效，我想将导航丸颜色更改为红色，否则正常

我试过在下面写代码但是没有用 你能帮我解决这个问题吗？

<div class="col">
     <tabset type="pills">
       <tab [heading]="strings.timesheetHeading"
          [customClass]="isTimesheetFormInvalid() ? 'invalid-timesheet-expense-tab' : ''">
          <pace-timesheet [model]="model.timesheetEntries" [parentForm]="timesheetFormChildren"></pace-timesheet>
        </tab>

        <tab [heading]="strings.expensesHeading"
                     [customClass]="isExpenseFormInvalid() ? 'invalid-timesheet-expense-tab' : ''">
              <pace-expenses [model]="model" [parentForm]="expensesFormChildren"></pace-expenses>
        </tab>
     </tabset>
</div>

CSS:

  .nav-pills > li.tab.invalid-timesheet-expense-tab.active > a,
  .nav-pills > li.tab.invalid-timesheet-expense-tab.active > a:hover,
  .nav-pills > li.tab.invalid-timesheet-expense-tab.active > a:focus {
    background-color: $common-color-error-red;

    heading {
      color: $common-color-white;
    }
  }

  .nav-pills > li.tab.invalid-timesheet-expense-tab > a,
  .nav-pills > li.tab.invalid-timesheet-expense-tab > a:hover,
  .nav-pills > li.tab.invalid-timesheet-expense-tab > a:focus {

    heading {
      color: $common-color-error-red;
    }
  }

Answer 1

<input type="text" class="form-control-plaintext" [ngClass]="{'bg-red': isTimesheetFormInvalid == true,'bg-green': isTimesheetFormInvalid == false}" formControlName="test">

使用 ngClass 添加条件类并根据您的要求添加条件我在使用 ngb-tabset 之前做了同样的事情。

希望对您有所帮助。