Angular11中如何获取动态创建的ngx-star-rating组件的评分值

你目前的写法只能拿到当前触发变更的评分值，无法关联到对应是第几个动态生成的控件，所以没法准确获取每个控件的对应值。

解决步骤 #

1. 修改模板绑定 #

给onModelChange事件追加传递当前循环的索引idx参数，模板代码调整为：

<div class="pull-left">
    <ngx-star-rating 
        id="rating1{{idx}}" 
        name="ratValue[{{idx}}]" 
        [disabled]="false" 
        [ngModel]="ratValue[idx]" 
        (onModelChange)="GetRatingValue($event, idx)">
    </ngx-star-rating>
</div>

2. 调整TS处理逻辑 #

修改GetRatingValue方法接收两个参数，分别是当前评分值和对应控件的索引，就能精准存储/获取每个动态控件的输入值：

// 存储所有动态评分控件的值，初始化时可根据数据库返回的列表长度赋值默认值
ratValue: number[] = [];

GetRatingValue(currentRating: number, controlIndex: number) {
    // 同步更新对应位置的评分值
    this.ratValue[controlIndex] = currentRating;
    // 如需单独处理某一个评分的变更，直接基于controlIndex判断即可
}

取值方式 #

• 获取单个评分：直接读取ratValue[对应索引]即可
• 获取全部评分：遍历ratValue数组就能拿到所有动态生成控件的评分值

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