Angular应用Bootstrap样式失效问题排查及代码修正请求

从你的描述来看，硬编码数据能正常渲染，但引入Bootstrap和MDB组件后内容消失，大概率是MDB组件未正确导入、样式未全局引入，或者是MDB组件的语法使用错误导致的。下面一步步帮你排查修复：

1. 确认MDB Angular依赖与模块导入 #

你用到了<mdb-badge>和<mdb-icon>这些MDB专属组件，必须在你的模块（比如EventModule或者AppModule）中导入对应的MDB模块，否则组件无法渲染，甚至会导致整个模板报错隐藏：

// app.module.ts 或者 event.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入MDB的徽章和图标模块（免费版请替换为对应包路径）
import { BadgeModule, IconModule } from 'ng-uikit-pro-standard';
import { EventComponent } from './event/event.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, EventComponent],
  imports: [
    CommonModule,
    BadgeModule, // 必须导入才能使用<mdb-badge>
    IconModule   // 必须导入才能使用<mdb-icon>
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修正MDB组件的语法错误 #

你的<mdb-badge>使用了danger="true"，这不符合MDB Angular的API规范，正确的写法是通过color属性指定颜色类型；同时我也格式化了代码结构，避免一行代码的语法遗漏：

修正后的event.component.html #

<div class="media">
  <h3 class="h3-responsive font-weight-bold mr-3">{{ value.time }}</h3>
  <div class="media-body mb-3">
    <!-- 修正badge的属性写法 -->
    <mdb-badge color="danger" class="text-center float-right">-</mdb-badge>
    <h6 class="mt-0 font-weight-bold">{{ value.subject }}</h6>
    <hr class="hr-bold mb-0 my-2" />
    <p class="mb-0" *ngIf="value.location">
      <mdb-icon fas icon="location-arrow"></mdb-icon> {{ value.location }}
    </p>
  </div>
</div>
<!-- 移除重复的样式类 -->
<p class="p-3 blue-grey lighten-5" *ngIf="value.description">
  {{ value.description }}
</p>

3. 确保Bootstrap/MDB样式全局引入 #

如果样式文件没正确引入，不仅样式不生效，还可能因为组件依赖的CSS类缺失导致元素被隐藏。打开angular.json，在styles和scripts数组中添加MDB/Bootstrap的资源：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/bootstrap-css-only/css/bootstrap.min.css",
              "node_modules/ng-uikit-pro-standard/assets/css/mdb.min.css" // 免费版替换为对应路径
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.min.js",
              "node_modules/ng-uikit-pro-standard/assets/js/mdb.min.js" // 免费版替换为对应路径
            ]
          }
        }
      }
    }
  }
}

4. 验证数据绑定的正确性 #

虽然你说硬编码能渲染，但还是建议确认events数据的结构是否和组件期望的一致。比如在app.component.ts中，确保events数组的每个对象包含time、subject等属性：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 示例数据，结构要和组件的value输入属性匹配
  events = [
    {
      time: '10:00 AM',
      subject: 'Team Meeting',
      location: 'Conference Room A',
      description: 'Discuss Q3 project roadmap'
    },
    {
      time: '2:30 PM',
      subject: 'Client Call',
      description: 'Review project deliverables'
    }
  ];
}

完成以上步骤后，重启Angular应用，应该就能正常显示带Bootstrap/MDB样式的内容了。

内容的提问来源于stack exchange，提问作者Nikhil