Angular 在页面处于初始化状态时触发ngb raring上的rateChange

我是个新手， 我试图使用ngb rating中的rateChange向数据库发送新的速率，但它在从服务器获取值时被触发，例如，当我尝试console.log时，它会打印从数据库获取的速率

这是Html模板：

<div class="card-group d-flex  justify-content-center">

    <div class="row justify-content-center">

        <div *ngFor="let item of items" class="col-sm-4  card bg-light"
            style=" max-width: 17rem; border:none; display: flex;margin: 30px;">

            <div class="card-img-top" style="height: 45%; white-space: nowrap;">
                <span class="helper"></span>
                <img src="{{item.image}}" style="margin: 0px; vertical-align: middle; display: inline-block;"
                    width="100%" alt="item.Name">
            </div>
            <div class="card-body">
                <h5 class="card-title" style="text-align: center;">{{item.Name}}</h5>
                <p class="card-description" style="height: 30%;">{{item.Description | Summery}}</p>
                <h5 class="card-text  price" style=" margin: 0px 0px 20px 0px ;">{{item.price | currency}}
                </h5>
                <ngb-rating [max]='5' [(rate)]="item.stars" *ngIf="" (rateChange)="onRateChange($event)">
                    <ng-template let-fill="fill">
                        <span class="star" [class.filled]="fill === 100">&#9733;</span>
                    </ng-template>
                </ngb-rating>
            </div>
            <button class="btn btn-primary mx-auto">add to cart</button>


        </div>
    </div>
</div>

---

ng引导程序实际上是在骗我们。查看评级源代码，我看到每当评级值更改时，即使用户未参与，也会发出

rateChange

我只看到一个解决方案—利用。您可以在设置初始值后订阅

从'@angular/core'导入{Component，OnInit，OnDescroy}；
从'src/modules/Item'导入{Item}；
从“./item.service”导入{ItemService}；
@组成部分({
选择器：“应用程序项”，
templateUrl:'./item.component.html'，
样式URL:['./item.component.css']
})
导出类ItemComponent实现OnInit、OnDestroy{
onDestroy$：主题=新主题（）；
项目：数组=[]；
构造函数（私有项服务：项服务）{}
ngOnInit（）：void{
这是getItems（）；
}
ngOnDestroy（）：void{
this.onDestroy$.next（）；
}
getItems（）{
返回此.itemService.getaData（）.subscribe(
响应=>{
this.items=（响应为Item[]）.map（Item=>{
常数控制=新的FormControl（item.stars）；
控制值更改
.tap（takeUntil（this.ondestory$））
.subscribe（newRate=>this.saveRating（newRate，item））；
返回{control，item}；
});
console.log（this.items）；
}
)
}
储蓄率（newRate:number，item:item）{
console.log（newRate，item）；
}
}

{{item.item.Name}
{{{item.item.description | summy}
{{item.item.price | currency}}
★
添加到购物车

您需要导入FormModule才能使其正常工作

那个答案花了不少时间。我真的希望它会有用（：

我创建了文档来修复文档

import { Component, OnInit } from '@angular/core';
import { Item } from 'src/moduls/item';
import { ItemService } from './item.service';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})

export class ItemComponent implements OnInit {

  constructor(private itemService: ItemService) { }
  items: any[] = [];
  onRateChange(newRate: number) {
    console.log(newRate);
  }

  ngOnInit(): void {
    this.getItems();
  }



  getItems() {
    return this.itemService.getaData().subscribe(
      Response => {
        this.items = Response as Item[];
        console.log(this.items);
      }
    )
  }

}

<div class="card-group d-flex  justify-content-center">

    <div class="row justify-content-center">

        <div *ngFor="let item of items" class="col-sm-4  card bg-light"
            style=" max-width: 17rem; border:none; display: flex;margin: 30px;">

            <div class="card-img-top" style="height: 45%; white-space: nowrap;">
                <span class="helper"></span>
                <img src="{{item.image}}" style="margin: 0px; vertical-align: middle; display: inline-block;"
                    width="100%" alt="item.item.Name">
            </div>
            <div class="card-body">
                <h5 class="card-title" style="text-align: center;">{{item.item.Name}}</h5>
                <p class="card-description" style="height: 30%;">{{item.item.Description | Summery}}</p>
                <h5 class="card-text  price" style=" margin: 0px 0px 20px 0px ;">{{item.item.price | currency}}
                </h5>
                <ngb-rating [max]='5' [formControl]='item.control'>
                    <ng-template let-fill="fill">
                        <span class="star" [class.filled]="fill === 100">&#9733;</span>
                    </ng-template>
                </ngb-rating>
            </div>
            <button class="btn btn-primary mx-auto">add to cart</button>


        </div>
    </div>
</div>