Модуль NgbRating показывает ненормальность и звездочку Angular 8.1.2 - PullRequest
Новая
       32

Модуль NgbRating показывает ненормальность и звездочку Angular 8.1.2

2 голосов
/ 13 января 2020

Я использую NgbRating модуль из @ng-bootstrap/ng-bootstrap, и я видел реализацию на stackblitz и реализовал, как это было там. После реализации это показывает ненормальность как это: enter image description here

Эти (*) между каждой звездой показывают, что я не хочу. Вот мой HTML код файла: 

<div id="about" *ngFor="let Review of Reviews" class="p-24" fxLayout="row wrap">
            <mat-card style="padding-bottom: 60px;" class="example-card">
                <mat-card-header>
                  <div mat-card-avatar class="example-header-image"></div>
                  <mat-card-title>{{ Review.patient.full_name }}</mat-card-title>
                  <mat-card-subtitle>{{ Review.timestamp }}</mat-card-subtitle>
                </mat-card-header>
                <div class="rating">
                    Overall Rating : 
                    <ngb-rating [rate]="Review.rating"></ngb-rating>
                </div>
                <mat-card-content>
                  <p>
                    {{ Review.review }}
                  </p>
                </mat-card-content>
                <mat-form-field class="example-full-width">
                    <textarea disabled matInput placeholder="Add your comment"></textarea>
                  </mat-form-field>
                  <mat-card-actions class="card-actions">
                  <button class="respond" mat-button>Respond</button>
                </mat-card-actions>
              </mat-card>
        </div>

Вот мой typescript код файла: 

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations';
import { ReviewService } from 'app/services/review/review.service';
import { Review } from 'app/models/review/review.model';
import { NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-review-list',
  templateUrl: './review-list.component.html',
  styleUrls: ['./review-list.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations   : fuseAnimations
})
export class ReviewListComponent implements OnInit {

  Reviews : Review[];
  constructor(private ReviewService : ReviewService, private config : NgbRatingConfig) { }

  currentRate = 3.14;
  ngOnInit() {
    this.config.max = 5;
    this.config.readonly = true;
    this.Reviews = this.ReviewService.find();
    console.log(this.Reviews)
  }

}

И у меня есть также добавлено NgbModule в мой module.ts файл.

Ответы [ 2 ]

3 голосов
/ 16 января 2020

Похоже, вы не установили библиотеку Bootstrap, которая необходима с ng- bootstrap. Вы можете взглянуть на этот стек , чтобы увидеть, что происходит, если отсутствует Bootstrap: рядом с каждой звездочкой рейтинга появляется текст (*), поскольку стиль для класса sr-only (для программ чтения с экрана) не применяется.

В этот обновленный стек установлена ​​библиотека Bootstrap, а CSS импортирована в styles.css: 

@import '~bootstrap/dist/css/bootstrap.min.css';

Как Как следствие, применяется стиль для класса sr-only, скрывая нежелательные звездочки и скобки.

Если вы используете Angular CLI, Bootstrap CSS можно импортировать в angular.json, как предложено в этой статье . Обратите внимание, что JQuery и popper.js не нужны при использовании ng- bootstrap, как указано в документации .

. Еще один способ - импортировать Bootstrap CSS из CDN в index.html. Этот метод используется в примерах кода , предоставленных в документации ng- bootstrap: 

<head>
  ...
  <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>

Если вы не хотите импортировать все Bootstrap CSS, вы можете добавить следующий код к глобальному CSS в вашем приложении, например, в styles.css, как показано в this stackblitz : 

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
1 голос
/ 15 января 2020

Я не могу понять, в чём заключается ошибка, хотя я использую личный код для совершения подобных злодеяний, CODE здесь:

html: 

  <div class="row align-items-center">
    <div class="col-md-12">
      <div class="rate">
        <input type="radio" id="star5" name="Rating" formControlName="Rating" value="5" />
        <label for="star5" title="5 estrelas"></label>
        <input type="radio" id="star4" name="Rating" formControlName="Rating" value="4" />
        <label for="star4" title="4 estrelas"></label>
        <input type="radio" id="star3" name="Rating" formControlName="Rating" value="3" />
        <label for="star3" title="3 estrelas"></label>
        <input type="radio" id="star2" name="Rating" formControlName="Rating" value="2" />
        <label for="star2" title="2 estrelas"></label>
        <input type="radio" id="star1" name="Rating" formControlName="Rating" value="1" />
        <label for="star1" title="1 estrela"></label>
      </div>
    </div>
  </div>

И таблица стилей: 

.rate {
    width: fit-content;
    height: 100px;
    margin:auto;

}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;

}
.rate:not(:checked) > label {
    float:right;
    white-space:nowrap;
    cursor:pointer;
    font-size:45px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

Затем вы можете извлечь значения и использовать их, как вы хотите в TS, например, я использую его в ngForm и отправить его на службу ведьме в срок передает его в мой API.

...