javascript - Angular 7 radio [attr.value] 破坏了 [ngModel] 功能

Question

我有一个包含 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>

我不太明白。

Answer 1

所有 DOM 原生属性不得使用 [attr.value] 设置，而只能使用 [value]、[id] 设置、[name] 或任何属性。 value="{{ans.name}}" 语法也是有效的(如果它是 string 类型)，但双 mustache 语法更适合字符串模板，在你的情况[value]="ans.name"更好。

[attr.my-attr] 语法用于自定义属性。