我有一个包含 4 个 radio 输入元素的列表,由 *ngFor 生成。
当我使用 [attr.value]="ans.name"
使用 ngModel
时,在每个单选元素上
在我使用 value="{{ans.name}}"
下面是破坏代码示例。
<li *ngFor="let ans of question.answers; let i = index;">
<label class="custom-radio" [attr.tabindex]="i+1" [attr.for]="'op-'+i"> {{ans.name}}
<input type="radio" name="answer" [attr.value]="ans.name" [attr.checked]="selectedAnswer === ans.name" [attr.id]="'op-'+i" [(ngModel)]="selectedAnswer">
<span class="checkmark"></span>
</label>
</li>
这是工作示例。
<li *ngFor="let ans of question.answers; let i = index;">
<label class="custom-radio" [attr.tabindex]="i+1" [attr.for]="'op-'+i"> {{ans.name}}
<input type="radio" name="answer" value="{{ans.name}}" [attr.checked]="selectedAnswer === ans.name" [attr.id]="'op-'+i" [(ngModel)]="selectedAnswer">
<span class="checkmark"></span>
</label>
</li>
我不太明白。
最佳答案
所有 DOM 原生属性不得使用 [attr.value]
设置,而只能使用 [value]
、[id]
设置、[name]
或任何属性。 value="{{ans.name}}"
语法也是有效的(如果它是 string
类型),但双 mustache 语法更适合字符串模板,在你的情况[value]="ans.name"
更好。
[attr.my-attr]
语法用于自定义属性。
关于javascript - Angular 7 radio [attr.value] 破坏了 [ngModel] 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57483010/