angular - ng-bootstrap 评级显示不需要的括号

Question

我正在尝试为图书阅读实现一个评级系统。我在表单上使用评级组件，但我看到星星旁边有 (*)。不确定它们来自哪里。

因此，当我悬停时，括号中的星号和星号会同时标记。我正在尝试实现 ng-bootstrap.github 中的示例

这是 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>

这是 rating.component.ts

的代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.css']
})
export class RatingComponent {

  currentRate = 1;
}

我正在使用 ng-bootstrap 4.0.2 和 angular-material 7.3.0。

编辑:为rating.component.html

添加代码

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

Answer 1

您还需要包含引导 CSS 文件。与星星相邻的 (*) 具有 sr-only 类，这意味着如果加载了正确的 CSS，它们应该被隐藏。

What is sr-only in Bootstrap 3?

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

确保你安装了 bootstrap npm install bootstrap --save-dev 并编辑你的 styles.scss 文件以导入 boostrap 样式:

@import "~bootstrap/dist/css/bootstrap.css";

或者只导入你需要的东西

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

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/