在複雜對象上使用單選按鈕綁定的角度4反應形式不起作用

Question

最初將值添加到窗體時，gradingKey.currentAnswer未綁定到單選按鈕。

爲什麼不起作用？

此之前角4見一次得手：How to set the selected radio button initially in *ngFor on radiobutton group

HTML

<form [formGroup]="gradingKeyForm"> 

<div class="form-group row"> 
<label class="col-6 col-form-label">{{getHalfScoresErrorsCount()}}</label> 
<div class="col-6"> 
<span *ngFor="let answer of gradingKey.halfScoresCountAnswers"> 
    <label class="radio-inline"> 
     <input type="radio" (ngModelChange)="onChangeHalfScoresErrorsCount($event)" 
     formControlName="halfScoresCount" [value]="answer"> 
     {{answer.value}} 
    </label> 
</span> 
</div> 
</div> 
</form> 

組件

ngOnInit() { 

    this.gradingKeyForm = this.fb.group({  
     halfScoresCount: this.gradingKey.currentAnswer, 
    }); 
} 

型號

import KeyValue from '../keyvalue'; 
import { IGradingKey } from './shared/grading-key-interface'; 

export default class GradingKey implements IGradingKey { 

    halfScoresCountAnswers: KeyValue<boolean, string>[]; 
    currentAnswer: KeyValue<boolean, string>; 

    constructor(obj: any) { 
    this.halfScoresCountAnswers = [new KeyValue(true, 'Ja'), new KeyValue(false, 'Nein')]; 
    this.currentAnswer = obj.halfScoresCount == true ? this.halfScoresCountAnswers[0] : this.halfScoresCountAnswers[1]; 
    } 
} 

Answer 1

您可以向radio組添加一個[checked]屬性，它可以是一個語句來評估是否應該檢查radio。只要點擊正在設置值，問題是無線電組不反映已更改的數據，它可能會爲你工作。

相關答案：https://stackoverflow.com/a/39407224/3934988

所以假設你的代碼的工作，因爲它應該在其他地方，這樣的事情應該工作：

<input type="radio"  (ngModelChange)="onChangeHalfScoresErrorsCount($event)" 
    formControlName="halfScoresCount" [value]="answer" [checked]="answer === currentAnswer">