如何使用[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之前，我做了同样的事情。

我希望这能有所帮助。