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 代码段包含在 link 中，如上面模板中注释掉的代码段所示，但这不起作用。

我已经尝试使用生命周期函数 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 when the selected rating changes, with the new rating as the $event value. See this stackblitz 用于演示。

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

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

ng-bootstrap 和组件之间的数据绑定不起作用

Data binding between ng-bootstrap and component not working

ng-bootstrap

angular