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

【问题标题】：Data binding between ng-bootstrap and component not workingng-bootstrap 和组件之间的数据绑定不起作用
【发布时间】：2018-06-02 18:01:56
【问题描述】：

我已经在我的模板中实现了 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}`);
    }
}

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

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

ng-bootstrap Rating 组件会在所选评级更改时发出rateChange 事件，新评级为$event 值。有关演示，请参阅 this stackblitz。

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

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

【讨论】：