如何将客户选择的额定值传递到角度组件

Question

>我正在使用角度6和材料库。我可以显示评级，但我无法将更新的评级传递给组件。这是我的代码，

<ng-container matColumnDef="ItemQuality">
<th mat-header-cell *matHeaderCellDef>Item Quality</th>
<td mat-cell *matCellDef="let element"><star-rating-comp [starType]="'icon'" [(rating)] ="element.ItemQuality"></star-rating-comp></td>
</ng-container>

Answer 1

您可以使用ngx-bootstrap库进行rating

我已经在堆栈闪电战上创建了一个演示

用于配置ngx-bootstrap- 文档 URL

安装库 -npm install ngx-bootstrap --save

app.module.ts

import { RatingModule } from 'ngx-bootstrap/rating';
@NgModule({
imports: [RatingModule.forRoot()]
})
export class AppModule(){}

组件.html

<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element">
<rating [(ngModel)]="element.rating" [max]="5" [readonly]="false"></rating>
</td>
</ng-container>

Answer 2

此处使用rating实现自定义双向数据绑定

所以你可以做这样的事情：

<ng-container matColumnDef="ItemQuality">
<th mat-header-cell *matHeaderCellDef>Item Quality</th>
<td mat-cell *matCellDef="let element"><star-rating-comp [starType]="'icon'" [(rating)] ="element.ItemQuality" (ratingChange)="someFunction($event)"></star-rating-comp></td>
</ng-container>

基本上你已经[(rating)]它由[rating]和(ratingChange)组成。收听(ratingChange)事件。

在您的component实施someFunction($event)。

在您的.ts：

someFunction(event){
//event will have your rating which is changed
}