Angular ng引导额定值显示不需要的支架

我正在尝试为书籍阅读实施评级系统。我在表单上使用了评级组件，但我看到星星旁边有

（*）

。不知道他们从哪里来

因此，当我悬停时，括号中的星号和星号同时被标记。我正试图从中实现这个示例

以下是list.component.html的部分代码

    <ng-container matColumnDef="rating">
        <th mat-header-cell *matHeaderCellDef>Rating</th>
        <td mat-cell *matCellDef="let element">
          <app-rating></app-rating>
        </td>
      </ng-container>

<ngb-rating [(rate)]="currentRate"></ngb-rating>

我使用的是

ng bootstrap 4.0.2

和

angular material 7.3.0

编辑：为rating.component.html添加代码

    <ng-container matColumnDef="rating">
        <th mat-header-cell *matHeaderCellDef>Rating</th>
        <td mat-cell *matCellDef="let element">
          <app-rating></app-rating>
        </td>
      </ng-container>

<ngb-rating [(rate)]="currentRate"></ngb-rating>

---

您还需要包括引导CSS文件。与星星相邻的

（*）

具有

sr only

类，这意味着如果加载了正确的CSS，它们应该被隐藏

根据bootstrap的文档，该类用于从呈现页面的布局中隐藏仅用于屏幕阅读器的信息

确保已安装引导

npm安装引导--保存dev

并编辑

styles.scss

文件以导入引导样式：

@import“~bootstrap/dist/css/bootstrap.css”

或者只进口你需要的东西

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

添加
rating.component.html
code请在rating.component中提供代码。html@Sreemat代码added@AndreiTătar code addedSo文档显示了如何呈现
（*）
。还有一个覆盖模板的选项，在这里我只需要“将其作为元素的唯一子元素…”我将
rating.component.html
更改为
。但是组件现在没有响应。@Ayubx那么你想使用
ng bootstrap
而不使用bootstrap css吗？我想让它工作起来。我不知道该在css中添加什么。我会仔细检查的，谢谢，但我的想法是将css添加到“rating.component.css”中，这取决于你使用了多少引导程序。。。您还可以仅导入（或重新定义）该组件中所需的内容。（仅限sr类）。。或者只隐藏所有sr only
：主机{：：ng deep{.sr only{display:none；}}}}