Html 如何使用[ngClass]或customClass更改选项卡集导航背景颜色

我用的是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>

使用ngClass添加条件类，并根据您的要求添加您的条件。在使用ngb选项卡集之前，我也做了同样的事情

我希望这会有所帮助

  .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;
    }
  }

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