NgClass 错误 Angular（无法绑定到 'ngClass'，因为它不是 'a' 的已知 属性）

Question

我是 angular 的新手，我正在尝试根据活动选项卡动态添加 bootstrap class 到我的 html，但是，我收到一个错误。你能帮帮我吗？

我的错误：无法绑定到 'ngClass'，因为它不是 'a'[=17= 的已知 属性 ]

我的html组件代码：

<div class="p-5 bg-white rounded shadow mb-5">
  <!-- Rounded tabs -->
  <ul id="myTab" role="tablist"
    class="nav nav-tabs nav-pills flex-column flex-sm-row text-center bg-light border-0 rounded-nav">
    <li class="nav-item flex-sm-fill">
      <a id="home-tab" href="#tab1" data-toggle="tab" role="tab" (click)="viewTabName('In')" aria-controls="home" aria-selected="true"
        [ngClass]="{active: activeTabName === 'In'}" 
        class="nav-link border-0 text-uppercase font-weight-bold">In</a>
    </li>

    <li class="nav-item flex-sm-fill">
      <a id="profile-tab" href="#tab2" data-toggle="tab" role="tab" (click)="viewTabName('Out')" aria-controls="profile" aria-selected="false"
      [ngClass]="{active: activeTabName === 'Out'}" 
        class="nav-link border-0 text-uppercase font-weight-bold">Out</a>
    </li>

  </ul>

我的component.ts:

@Component({
  selector: 'app-tab',
  templateUrl: './app-tab.component.html',
  styleUrls: ['./app-tab.component.scss']
})
export class AppTabComponent implements OnInit {
   constructor(){}

  activeTabName: string = '';
viewTabName(tab: string){
    this.activeTabName = tab;
    console.log(this.activeTabName);
  }
}

我的app.module.ts

@NgModule({ 
declarations: [AppTabComponent],
 imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
]
})

Answer 1

请将class名字用引号括起来

[ngClass]="{'active': activeTabName === 'In'}"
[ngClass]="{'active': activeTabName === 'Out'}"