单选按钮-导致故障的动态值

Question

我已经试着解决这个问题一段时间了，也许你们中的一些人已经有了答案。练习很简单，我尝试在*ngFor循环中创建一个输入。

但是收音机的按钮不是这样工作的。。。

TS Code:

get datas(): {radio:number}[] {
return [
{radio: 1},
{radio: 2},
{radio: 3},
{radio: 4},
{radio: 5},
{radio: 6},
]
}
ngOnInit() {
this.testForm = this.fb.group({
radios: [1]
});
}
change(val: number): void {
this.testForm.get('radios')?.setValue(val);
}

我已经制定了这个change方法，这样我就可以重现无线电选项的更改。

HTML Code:

<form [formGroup]="testForm">
<ng-container *ngFor="let data of datas">
<input type="radio" [value]="data.radio" [name]="'radios'" [formControlName]="'radios'">
</ng-container>
other
<input type="radio" [value]="4" [name]="'radios'" [formControlName]="'radios'">
<input type="radio" [value]="5" [name]="'radios'" [formControlName]="'radios'">
<input type="radio" [value]="6" [name]="'radios'" [formControlName]="'radios'">
</form>
{{ testForm.value | json }}

不知道other无线电输入工作的原因，但不知道上面的原因。我也试过[attr.value]，但在这种情况下，它没有用，甚至会更坏。

Answer 1

当每次发生更改时都使用get data时，它会一次调用get data。这就是生成一个无法与任何旧对象匹配的全新对象。你可以试试这个

// change from:
// get datas(): {radio:number, id: number}[] {
//   return [
//     {radio: 1},
//     {radio: 2},
//     {radio: 3},
//     {radio: 4},
//     {radio: 5},
//     {radio: 6},
//   ]
// }
// to:
datas = [
{ radio: 1 },
{ radio: 2 },
{ radio: 3 },
{ radio: 4 },
{ radio: 5 },
{ radio: 6 },
];

或者这个

sampleData = [
{ radio: 1 },
{ radio: 2 },
{ radio: 3 },
{ radio: 4 },
{ radio: 5 },
{ radio: 6 },
];

get datas(): { radio: number }[] {
// console.log(1); <= unrem to check when it call
return this.sampleData;
}