使用ngClass和Bootstrap4进行动态样式设置，并使用AngularFire2从Firebase检索类的值

。

ngClass是Angular框架中的一个指令，用于动态设置HTML元素的CSS类。它可以根据条件在元素上添加或移除CSS类，从而实现动态样式设置。

Bootstrap4是一个流行的前端框架，提供了丰富的CSS样式和JavaScript组件，可以快速构建现代化的响应式网页。

AngularFire2是Angular框架的一个插件，用于与Firebase实时数据库进行集成。Firebase是一个由Google提供的云服务平台，提供了实时数据库、身份验证、云存储等功能。

在使用ngClass和Bootstrap4进行动态样式设置时，首先需要在Angular项目中引入Bootstrap4的CSS文件。可以通过在index.html文件中添加以下代码来引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

接下来，在组件的HTML模板中，可以使用ngClass指令来根据条件动态设置CSS类。例如，假设有一个名为"isActive"的布尔变量，可以根据它的值来添加或移除CSS类：

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Hello World</div>

上述代码中，如果isActive为true，则会添加名为"active"的CSS类；如果isActive为false，则会添加名为"inactive"的CSS类。

从Firebase检索类的值可以使用AngularFire2提供的功能。首先，需要在Angular项目中安装和配置AngularFire2。可以通过以下命令来安装AngularFire2：

npm install firebase @angular/fire

安装完成后，需要在Angular项目的app.module.ts文件中进行配置：

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

const firebaseConfig = {
  // Firebase配置信息
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  // 其他配置
})
export class AppModule { }

配置完成后，就可以在组件中使用AngularFire2来检索Firebase中的数据。假设有一个名为"items"的Firebase数据库节点，可以通过以下代码来检索该节点的值：

import { AngularFireDatabase } from '@angular/fire/database';

export class MyComponent {
  items: any[];

  constructor(private db: AngularFireDatabase) {
    this.db.list('items').valueChanges().subscribe((data) => {
      this.items = data;
    });
  }
}

上述代码中，通过调用db.list('items').valueChanges()方法来获取"items"节点的值，并通过subscribe方法来订阅数据的变化。在数据变化时，将获取到的值赋给组件中的items变量。

综上所述，使用ngClass和Bootstrap4进行动态样式设置，并使用AngularFire2从Firebase检索类的值的步骤如下：