Связывание данных между ng-bootstrap и компонентом не работает

Question

Я внедрил рейтинг ng-bootstrap в своем шаблоне, как показано:

<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>

Цель состоит в том, чтобы отфильтровать все продукты на основе выбранного рейтинга.Я хочу вызвать функцию filterProducts () моего компонента, используя выбранное значение рейтинга.Я попытался заключить сегмент кода ngb-rating в ссылку, как показано в закомментированном сегменте кода в шаблоне выше, но это не работает.

Я попытался использовать функцию жизненного цикла., ngOnChanges, как показано ниже, но никогда не вызывается, когда значение рейтинга изменяется в шаблоне.

ngOnChanges(changes: SimpleChanges) {
    console.log('changes ', changes);
    for (let propName in changes) {
      let chng = changes[propName];
      let cur = JSON.stringify(chng.currentValue);
      let prev = JSON.stringify(chng.previousValue);
      console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
}

Как обнаружить изменения значения рейтинга, выбранного в шаблоне, внутри компонента?

Answer 1

Компонент рейтинга ng-bootstrap генерирует событие rateChange при изменении выбранного рейтинга с новым рейтингом в качестве значения $event.См. этот стек для демонстрации.

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

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