Angular9单选框选中值无法提交至Flask后端问题求助

你的核心问题在于POST请求仅在组件初始化时执行了一次，完全没有和用户选择单选按钮的动作关联起来：

• 你把this.http.post放在了ngOnInit钩子中，这个方法只会在组件第一次加载时运行，此时selectedOption3还没有被用户选择，自然发送的是空值。
• 你的表单既没有绑定提交事件，也没有监听selectedOption3的变化，所以用户选择单选按钮后，没有触发新的POST请求来更新值。

这里提供两种常见的解决思路，你可以根据业务需求选择：

方式1：单选按钮值变化时自动发送请求 #

通过ngModelChange事件监听单选按钮的选择变化，一旦用户选了新选项就立刻触发POST请求。

修改HTML代码 #

给mat-radio-group添加值变化事件绑定：

<form class='form' method='POST'>
 <mat-radio-group class="radio" [(ngModel)]='selectedOption3' name='test' (ngModelChange)="onRadioSelected($event)">
 <mat-radio-button class="button" *ngFor="let data3 of getThirdkeys(Data[selectedOption][selectedOption2])" [value]='data3' name='test2'>
 <div class="data3">{{data3}} </div>
 </mat-radio-button>
 </mat-radio-group>
</form>

修改Angular组件代码 #

移除ngOnInit里的POST请求，新增值变化触发的方法：

export class AppComponent implements OnInit {
 selectedOption = "";
 selectedOption2 = "";
 selectedOption3 = "";
 Data : JSON;
 private DRC_json = 'http://127.0.0.1:5100/drc_database.json';
 private Images_DRC = 'http://127.0.0.1:5100/ReceiveImage';

 constructor(private http : HttpClient) {}

 ngOnInit () {
   this.http.get<JSON>(this.DRC_json).subscribe((data: JSON)=>{
     console.log(data); 
     this.Data = data;
   });
   // 删除这里的POST请求，它只会执行一次
 }

 // 用户选择单选按钮时触发POST
 onRadioSelected(selectedValue: string) {
   this.http.post<any>(this.Images_DRC, selectedValue).subscribe({
     next: (res) => console.log("请求成功，后端响应：", res),
     error: (err) => console.error("请求失败：", err)
   });
 }
}

方式2：添加提交按钮，让用户手动触发请求 #

如果希望用户确认选择后再提交，可以给表单添加提交按钮，通过ngSubmit事件绑定提交动作。

修改HTML代码 #

<form class='form' (ngSubmit)="onSubmitForm()" method='POST'>
 <mat-radio-group class="radio" [(ngModel)]='selectedOption3' name='test'>
 <mat-radio-button class="button" *ngFor="let data3 of getThirdkeys(Data[selectedOption][selectedOption2])" [value]='data3' name='test2'>
 <div class="data3">{{data3}} </div>
 </mat-radio-button>
 </mat-radio-group>
 <!-- 添加提交按钮 -->
 <button type="submit" [disabled]="!selectedOption3">提交选择</button>
</form>

修改Angular组件代码 #

同样移除ngOnInit里的POST请求，新增表单提交方法：

export class AppComponent implements OnInit {
 selectedOption = "";
 selectedOption2 = "";
 selectedOption3 = "";
 Data : JSON;
 private DRC_json = 'http://127.0.0.1:5100/drc_database.json';
 private Images_DRC = 'http://127.0.0.1:5100/ReceiveImage';

 constructor(private http : HttpClient) {}

 ngOnInit () {
   this.http.get<JSON>(this.DRC_json).subscribe((data: JSON)=>{
     console.log(data); 
     this.Data = data;
   });
 }

 // 表单提交时发送POST请求
 onSubmitForm() {
   if (!this.selectedOption3) {
     console.warn("请先选择选项");
     return;
   }
   this.http.post<any>(this.Images_DRC, this.selectedOption3).subscribe({
     next: (res) => console.log("提交成功：", res),
     error: (err) => console.error("提交失败：", err)
   });
 }
}

• 推荐使用Angular的响应式表单（FormGroup/FormControl）替代ngModel，它能更灵活地处理表单状态、验证和值变化，也更符合Angular的最佳实践。
• 记得在组件销毁时取消HTTP请求订阅，避免内存泄漏，可以使用takeUntil操作符或者async管道。
• Flask后端可以考虑适配JSON格式的请求，比如用request.get_json()来接收数据，这样前后端的数据交互会更规范。

内容的提问来源于stack exchange，提问作者Alexandre