Angular 15中使用ngb-rating实现选中星级组后禁用其他组

1. 修正模型与组件变量 #

先修复custReviews模型的语法错误，再在组件中新增控制选中状态和禁用逻辑的变量：

// 修正后的模型文件
export class custReviews {
  userId: number = 1;
  productId: number = 1;
  content: string = "";
  rating: number = 0; // 修复语法错误，补充类型定义
}

// 组件TS代码
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { custReviews } from './models/cust-reviews'; // 替换为你的模型实际路径

@Component({
  selector: 'app-review-rating',
  templateUrl: './review-rating.component.html',
  styleUrls: ['./review-rating.component.css']
})
export class ReviewRatingComponent {
  custReviews: custReviews = new custReviews();
  isReviewed = false;
  selectedRating: number = 0; // 存储用户选中的星级值
  reviewForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单
    this.reviewForm = this.fb.group({
      ratingControl: [0]
    });
  }

  // 处理星级选择逻辑
  selectRating(targetRating: number): void {
    this.selectedRating = targetRating;
    this.custReviews.rating = targetRating;
    this.reviewForm.get('ratingControl')?.setValue(targetRating);
    this.isReviewed = true;
  }

  saveReviews(): void {
    // 在这里编写评论保存的业务逻辑
    console.log('待保存的评论数据:', this.custReviews);
  }

  // 可选：重置选中状态
  resetRating(): void {
    this.selectedRating = 0;
    this.custReviews.rating = 0;
    this.reviewForm.get('ratingControl')?.setValue(0);
    this.isReviewed = false;
  }
}

2. 改造模板代码 #

调整ngb-rating的绑定逻辑，实现点击即选中组内满星，且选中后禁用其他组：

<div class="form-outline">
  <ngb-rating
    [max]="1"
    [(rate)]="selectedRating === 1 ? 1 : 0"
    [disabled]="selectedRating !== 0 && selectedRating !== 1"
    (click)="selectRating(1)"
    formControlName="ratingControl"
  ></ngb-rating>
  |
  <ngb-rating
    [max]="2"
    [(rate)]="selectedRating === 2 ? 2 : 0"
    [disabled]="selectedRating !== 0 && selectedRating !== 2"
    (click)="selectRating(2)"
    formControlName="ratingControl"
  ></ngb-rating>
  |
  <ngb-rating
    [max]="3"
    [(rate)]="selectedRating === 3 ? 3 : 0"
    [disabled]="selectedRating !== 0 && selectedRating !== 3"
    (click)="selectRating(3)"
    formControlName="ratingControl"
  ></ngb-rating>
  |
  <ngb-rating
    [max]="4"
    [(rate)]="selectedRating === 4 ? 4 : 0"
    [disabled]="selectedRating !== 0 && selectedRating !== 4"
    (click)="selectRating(4)"
    formControlName="ratingControl"
  ></ngb-rating>
  |
  <ngb-rating
    [max]="5"
    [(rate)]="selectedRating === 5 ? 5 : 0"
    [disabled]="selectedRating !== 0 && selectedRating !== 5"
    (click)="selectRating(5)"
    formControlName="ratingControl"
  ></ngb-rating>

  <!-- 可选：添加重置按钮 -->
  <button *ngIf="selectedRating > 0" class="ms-3" (click)="resetRating()">重置星级</button>
</div>

3. 核心逻辑说明 #

• 强制选中满星：通过[(rate)]的绑定表达式，只有当当前组被选中时，星级值设为组的最大值，否则为0，确保点击该组直接选中满星。
• 禁用其他组：利用[disabled]属性，当已选中其他星级（selectedRating不为0且不等于当前组的最大值）时，禁用当前组。
• 表单数据同步：点击时同步更新selectedRating、custReviews.rating以及表单控件的值，保证数据一致性。

内容的提问来源于stack exchange，提问作者Sona