Angular项目中Bootstrap评分图标不显示问题求助

核心问题：Bootstrap版本与图标类不匹配 #

你使用的是Bootstrap 5.2，但代码里的glyphicon类是Bootstrap 3专属的图标类——Bootstrap 4及之后的版本已经移除了内置的Glyphicon图标库，所以你的<i>标签因为没有有效样式，看起来像是组件未显示。

修复方案（二选一） #

方案1：切换到Bootstrap 3版本 #

修改index.html中的Bootstrap CSS链接，替换为Bootstrap 3.x的稳定版本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

这样原代码中的glyphicon-star-empty和glyphicon-star类就能正常生效，组件会显示出评分图标。

方案2：适配Bootstrap 5的图标系统 #

如果你想继续使用Bootstrap 5，需要引入Bootstrap Icons图标库，并替换图标类：

1. 在index.html的<head>中添加Bootstrap Icons的CSS链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

2. 修改rating.component.ts中的模板代码，替换为Bootstrap 5的图标类：

template:`<i
    class="bi"
    [class.bi-star]="rating < 1"
    [class.bi-star-fill]="rating >= 1"
    (click)="onClick(1)"
>
</i>`

其他验证点（已确认无问题） #

• RatingComponent已正确添加到app.module.ts的declarations数组中
• app.component.ts中已正确使用<rating>选择器
• 评分组件的点击逻辑无语法错误

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