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?

  

根据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/