NgbRating 模块显示异常和星号 Angular 8.1.2
NgbRating module showing abnormality and asterisk Angular 8.1.2
我正在使用 @ng-bootstrap/ng-bootstrap
中的 NgbRating
模块,并且我已经看到了 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)
}
}
而且我还在 module.ts
文件中添加了 NgbModule
。
虽然我使用个人代码进行此类评估,但我真的无法弄清楚错误是什么,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>
以及样式 sheet:
.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.
您似乎没有安装 Bootstrap library, which is needed with ng-bootstrap. You can take a look at this stackblitz 来查看缺少 Bootstrap 时会发生什么:文本 (*)
出现在每个评级星的旁边,因为 sr-only
class(对于屏幕阅读器)未应用。
在this updated stackblitz中安装了Bootstrap库并在styles.css
中导入了CSS:
@import '~bootstrap/dist/css/bootstrap.min.css';
因此应用了 sr-only
class 的样式,隐藏了不需要的星号和括号。
如果您使用 Angular CLI,Bootstrap CSS 可以按照 this article. Please note that JQuery
and popper.js
are not needed when using ng-bootstrap, as mentioned in the documentation 中的建议导入 angular.json
。
另一种方法是从 index.html
中的 CDN 导入 Bootstrap CSS。 ng-bootstrap 文档中提供的 code samples 中使用了该方法:
<head>
...
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
如果你不想导入整个BootstrapCSS,你可以在你的应用中全局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;
}
我正在使用 @ng-bootstrap/ng-bootstrap
中的 NgbRating
模块,并且我已经看到了 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)
}
}
而且我还在 module.ts
文件中添加了 NgbModule
。
虽然我使用个人代码进行此类评估,但我真的无法弄清楚错误是什么,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>
以及样式 sheet:
.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.
您似乎没有安装 Bootstrap library, which is needed with ng-bootstrap. You can take a look at this stackblitz 来查看缺少 Bootstrap 时会发生什么:文本 (*)
出现在每个评级星的旁边,因为 sr-only
class(对于屏幕阅读器)未应用。
在this updated stackblitz中安装了Bootstrap库并在styles.css
中导入了CSS:
@import '~bootstrap/dist/css/bootstrap.min.css';
因此应用了 sr-only
class 的样式,隐藏了不需要的星号和括号。
如果您使用 Angular CLI,Bootstrap CSS 可以按照 this article. Please note that JQuery
and popper.js
are not needed when using ng-bootstrap, as mentioned in the documentation 中的建议导入 angular.json
。
另一种方法是从 index.html
中的 CDN 导入 Bootstrap CSS。 ng-bootstrap 文档中提供的 code samples 中使用了该方法:
<head>
...
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
如果你不想导入整个BootstrapCSS,你可以在你的应用中全局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;
}