Question

在for循环中，我正在渲染单选按钮，但我需要将单选按钮ID增加到radio1,radio2 and so on。我该怎么做？

请帮忙。

<span class="radio-radio-wrapper padding-radio" *ngFor="let demand of Demands">
            <input id="radio1" name="radio" [(ngModel)]="demandValue" [value]="demand.value" type="radio">
            <span class="radioLabel"><label class="custom-control-description" for="radio1">{{demand.name}}</label></span>
</span>

Answer 1

<span class="radio-radio-wrapper padding-radio" *ngFor="let demand of Demands; let i = index;">
    <input id="radio{{i}}" name="radio" [(ngModel)]="demandValue" [value]="demand.value" type="radio">
    <span class="radioLabel">
        <label class="custom-control-description" for="radio{{i}}">{{demand.name}}</label>
    </span>
</span>

我在for循环中添加了索引并修复了问题

Answer 2

您可以使用输入中的attr.id属性设置ID值。

可以从* ngFor中提取索引值。 *ngFor="let item of items; let i = index"

<span class="radio-radio-wrapper padding-radio" *ngFor="let demand of Demands; let i = index">
            <input attr.id={{'radio' + i}} name="radio" [(ngModel)]="demandValue" [value]="demand.value" type="radio">
            <span class="radioLabel"><label class="custom-control-description" for="radio1">{{demand.name}}</label></span>
</span>

Answer 3

使用索引let i = index;并将其提供给您的ID。但是，您的ngModel和ngValue对象应该来自您的Demands数组。否则，如果您在单选按钮中选择该值，则会影响所有单选按钮。

试试这个。

<span class="radio-radio-wrapper padding-radio" *ngFor="let demand of Demands; let i = index;">
            <input id="radio{{I + 1 }}" name="radio" [(ngModel)]="demandValue" [value]="demand.value" type="radio">
            <span class="radioLabel"><label class="custom-control-description" for="radio{{I + 1}}">{{demand.name}}</label></span>
</span>

for循环中增加比率按钮ID

3 个答案: