绑定单选按钮ngFor angular 2

Question

我想从列表中为用户评分。我试过这样做

<div *ngFor="let user of userList; let i = index">
    <form class="rate">
        <input type="radio" id="star5" name="rate" value="5" (click)="rateModel.ratedId = user.userId; rateModel.rateValue = 5; rateuser(i);" [checked]="user.rate > 4" />
        <label for="star5" title="Excellent">5 stars</label>
        <input type="radio" id="star4" name="rate" value="4" (click)="rateModel.ratedId = user.userId; rateModel.rateValue = 4; rateuser(i);" [checked]="user.rate < 4.5 && user.rate > 3" />
        <label for="star4" title="Good">4 stars</label>
        <input type="radio" id="star3" name="rate" value="3" (click)="rateModel.ratedId = user.userId; rateModel.rateValue = 3; rateuser(i);" [checked]="user.rate < 3.5 && user.rate > 2" />
        <label for="star3" title="Fair">3 stars</label>
        <input type="radio" id="star2" name="rate" value="2" (click)="rateModel.ratedId = user.userId; rateModel.rateValue = 2; rateuser(i);" [checked]="user.rate < 2.5 && user.rate > 1" />
        <label for="star2" title="Bad">2 stars</label>
        <input type="radio" id="star1" name="rate" value="1" (click)="rateModel.ratedId = user.userId; rateModel.rateValue = 1; rateuser(i);" [checked]="user.rate < 1.5 && user.rate > 0" />
        <label for="star1" title="Very bad">1 star</label>
    </form>
</div>

我使用*i只是通过在控制台上显示迭代来检查迭代是否真的有用。但它只发送索引值为0.并且它不能根据迭代分配userId，它保存第一个userId值。

Answer 1

Angular将“name”属性转换为 ng-name ，其中浏览器需要单选按钮标记中的"name"属性。您可以通过添加"[attr.name]="

来完成此操作

要实现这一目标，您需要声明如下：

 <input type="radio" id="star5" [attr.name]="rate" name="rate" value="5" 
(click)="rateModel.ratedId = user.userId; rateModel.rateValue = 5; rateuser(i);"  
[checked]="user.rate > 4" />