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值。有关演示，请参阅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和组件之间的数据绑定不起作用

1 个答案: