Angular中多星级评分绑定及指定提交格式实现求助

1. 组件模板（HTML） #

通过*ngFor遍历rating数组，为每个问题生成独立的星级评分组件，同时绑定对应评分值，搭配评论输入框：

<form #ratingForm="ngForm" (ngSubmit)="onSubmit(ratingForm)">
  <!-- 动态生成星级评分项 -->
  <div *ngFor="let item of rating">
    <label>问题 {{ item.question }} 评分：</label>
    <rating [(ngModel)]="formData.answer[item.question]" [max]="5" name="rating-{{item.question}}"></rating>
  </div>

  <!-- 用户评论输入 -->
  <div>
    <label>评论：</label>
    <textarea [(ngModel)]="formData.comments" name="comments" rows="3"></textarea>
  </div>

  <button type="submit" [disabled]="!ratingForm.valid">提交</button>
</form>

2. 组件逻辑（TypeScript） #

初始化符合要求的表单数据结构，处理提交逻辑：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-multi-rating',
  templateUrl: './multi-rating.component.html'
})
export class MultiRatingComponent implements OnInit {
  // 原始问题数组
  rating = [
    { sno: 1, question: 13 },
    { sno: 2, question: 5 },
    { sno: 3, question: 7 }
    // 更多问题项...
  ];

  // 表单数据结构，与提交要求对齐
  formData = {
    answer: {} as Record<number, number>,
    comments: ''
  };

  ngOnInit(): void {
    // 为每个问题初始化默认评分（可选，比如默认0）
    this.rating.forEach(item => {
      this.formData.answer[item.question] = 0;
    });
  }

  onSubmit(form: any): void {
    if (form.valid) {
      // 此处可对接API提交，formData即为要求的格式
      console.log('提交数据：', this.formData);
      // 示例：this.http.post('/api/submit-rating', this.formData).subscribe(...);
    }
  }
}

3. 关键说明 #

• 每个评分组件通过name="rating-{{item.question}}"保证表单控件唯一性，避免ngModel绑定冲突。
• 直接以问题编号item.question作为answer对象的键，绑定评分值，提交时自动生成目标格式的结构。
• 初始化时为每个问题设置默认评分，避免提交时缺失对应键值对。

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