Рейтинг ng-bootstrap показывает нежелательные скобки - PullRequest
Новая
       18

Рейтинг ng-bootstrap показывает нежелательные скобки

0 голосов
/ 11 февраля 2019

Я пытаюсь внедрить Рейтинговую систему для чтения книг.У меня есть компонент рейтинга, работающий с формой, но я вижу (*) рядом со звездами.Не знаю, откуда они взялись.

enter image description here

Поэтому при наведении курсора на звездочку и звездочку в скобках отмечаются одновременно.Я пытаюсь реализовать пример из 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>

1 Ответ

0 голосов
/ 11 февраля 2019

Вам также необходимо включить файлы начальной загрузки CSS.(*) рядом со звездами имеет класс sr-only, что означает, что они должны быть скрыты, если загружен правильный CSS.

Что такое sr-only в Bootstrap 3?

Согласно документации по загрузке, класс используется для скрытия информации, предназначенной только для программ чтения с экрана, от макета отображаемой страницы.

Убедитесь, что вы установили загрузчик 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/

...