Angular ng引导和组件之间的数据绑定不工作

我已经在我的模板中实现了ng引导评级，如图所示：

<div class="row m-t-2">
   <div class="col">
   <h5>Review Rating</h5>
   <div>
     <!-- <a (click)="filterProducts()">  -->
     <ngb-rating [(rate)]="reviewRating" max="5">
       <ng-template let-fill="fill" let-index="index">
         <span class="star" [class.filled]="fill === 100">&#9733;</span>
       </ng-template>
     </ngb-rating>
     <!-- </a> -->
     <p>Please choose a rating</p>
     reviewRating {{reviewRating}}
   </div>

---

如何从组件内部检测模板中所选评级值的变化？

当所选评级发生变化时，ng引导评级组件会发出一个事件，新评级为

$event

值。请参见演示

<ngb-rating [(rate)]="reviewRating" max="5" (rateChange)="onRateChange($event)">
  ...
</ngb-rating>

<ngb-rating [(rate)]="reviewRating" max="5" (rateChange)="onRateChange($event)">
  ...
</ngb-rating>

onRateChange(event: number) {
  console.log("The selected rate changed to", event);
}