javascript - Angular 2 RadioButton 选中

Question

使用旧的表单，我可以像这样设置选中的单选按钮:

<div class="radio" *ngFor="let transport of transports">
  <label>
   <input type="radio" name="transport" [ngModel]="{checked: transport.id == selectedTransport.id}" (change)="onTransportChange(transport)"> {{ transport.name }}
  </label>
</div>

有了新的 Angular 形式，我无法使用 [ngModel]="{checked:''}" 实现这一点，但我可以使用 [checked]，然后我尝试这样做:

<input type="radio" name="transport" [checked]="transport.id == selectedTransport.id"> {{ transport.name }}

这行得通，但如果我设置 [ngModel] 这不再检查:

<input type="radio" name="transport" [checked]="transport.id == selectedTransport.id" [ngModel]="transport" (change)="onTransportChange(transport)"> {{ transport.name }}

编辑:

旧形式的 Plunker: http://plnkr.co/edit/zu4j9MpALIgCT9JHuIPz?p=preview

Plunker 的新形式: http://plnkr.co/edit/cWCp5d122h3wvSRa8AYQ?p=preview

谁能帮我解决这个问题？谢谢!

Answer 1

尝试指定值属性。并且不要忘记，在单选按钮的情况下，模型不应包含 bool 值，但应包含单选特定值，例如:

  <input type="radio" name="food" value="beef" [(ngModel)]="myFood"> Beef
  <input type="radio" name="food" value="lamb" [(ngModel)]="myFood"> Lamb
  <input type="radio" name="food" value="fish" [(ngModel)]="myFood"> Fish

在这种情况下，您不需要 [checked] 属性。