angular - レンダリング後にリアクティブ ラジオが設定されない

Question

基本的にはこのプランカーのようなものです

<form [formGroup]="form">
  <div class="form-control" *ngFor="let item of foods">
    <input type="radio" formControlName="food" value="{{item}}"> {{item}}
  </div>
</form>

非常に単純な反応形。

ただし、実際のプロジェクトに正確なコードを配置すると。うまくいきません。

チェックされたプロパティをtrueに設定しようとしていることがわかります

この行でthis._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state);

ただし、ロード後に画面上でチェック済みとしてマークされません。

タイプをチェックボックスに変更すると、正常に動作します。

ngModel を使用すると、問題なく動作します。

他に何がうまくいかないのかわかりません。

アップデート：

別のスターターでテストしました

それもうまくいきません。

コンポーネントは次のようになります

import { FormBuilder } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
  <form [formGroup]="form">
   <div *ngFor="let x of foods">
      <input type="radio" value="{{x}}"  formControlName="food"> {{x}}
   </div>
  </form>
`,
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  form;
  foods = ['beef', 'lamb', 'fish'];

  constructor(private _FormBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this._FormBuilder.group({
      food: 'lamb'
    });
  }
}