NG-引导评级显示不需要支架

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?

根据引导的文档，类被用来隐藏仅用于从渲染页面的布局屏幕阅读器的信息。

确保你安装引导npm install bootstrap --save-dev和编辑您styles.scss文件导入自举样式：

@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/