时间戳

首页 > 解决方案 > NgbRating 模块显示异常和星号 Angular 8.1.2

typescript - NgbRating 模块显示异常和星号 Angular 8.1.2

问题描述

我正在使用来自的NgbRating模块，@ng-bootstrap/ng-bootstrap并且我已经看到了stackblitz上的实现并按原样实现。实施后显示异常如下： 在此处输入图像描述

每颗星星之间的这些(*)都表明我不想要。这是我的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文件中。

标签： typescriptangular8ng-bootstrap

解决方案

看起来您没有安装ng-bootstrap所需的Bootstrap库。您可以查看此 stackblitz以了解缺少 Bootstrap 时会发生什么：文本显示在每个评级星旁边，因为未应用类的样式（用于屏幕阅读器）。(*)sr-only

在这个更新的 stackblitz中，安装了 Bootstrap 库并导入了 CSS styles.css：

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

因此，sr-only应用了类的样式，隐藏了不需要的星号和括号。

如果您使用 Angular CLI，则可以按照本文angular.json中的建议导入 Bootstrap CSS 。请注意，使用 ng-bootstrap 时不需要 和 ，如文档中所述。JQuerypopper.js

另一种方法是从 CDN 中导入 Bootstrap CSS 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 中，例如 in styles.css，如此 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;
}

推荐阅读