Question

我正在制作一个HotelRating组件，该组件应该显示酒店有多少星星。（例如，3 og 5星）

最大和当前评级都应该是父组件的输入。

目前我从父级获取值并生成一个布尔数组，这样我就可以使用* ngFor来制作模板中的星星。

我的问题是在我的@Input Setter函数中生成数组时没有更新ngFor。

我的代码如下。希望有人可以告诉我我做错了什么，或者可能有更好的解决方案来解决我的任务。

TS：

export class HotelStarsComponent {
  // An array to hold the values for the rating component
  ratingArray:boolean[] = [];
  // Input containing the max number of stars available
  @Input() maxRating:number = 5;
  // Internal variable to store the hotel rating
  private _hotelRating;
  // The setter sets to value of the "internal" variable to the input value
  @Input() set hotelRating(hotelRating: number) {
    this._hotelRating = hotelRating;
    for(let i = 0; i < this.maxRating; i++){
      this.ratingArray.push(i < hotelRating ? true : false);
    }
  }
  // The getter is used to get the variable
  get hotelRating() {
    return this._hotelRating;
  }

}

HTML：

<span 
  class="star" 
  uk-icon="icon: github-alt; ratio: .75"
  *ngFor="let star of ratingArray"
  [class.active]="star">
</span>

输入设置器生成的Angular 5 ngFor Array，不更新

0 个答案: