时间戳

首页 > 解决方案 > ng-bootstrap 评级显示不需要的括号

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

问题描述

我正在尝试为书籍阅读实施评级系统。我有评级组件在表单上工作，但我看到(*)与星星相邻。不知道他们来自哪里。

在此处输入图像描述

因此，当我将鼠标悬停在括号中的星号和星号时，会同时标记。我正在尝试从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>

标签： angularangular-materialng-bootstrapangular-material-6

解决方案

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

Bootstrap 3 中的 sr-only 是什么？

根据 bootstrap 的文档，该类用于从渲染页面的布局中隐藏仅供屏幕阅读器使用的信息。

确保您安装了引导程序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/

推荐阅读