Angular 2中如何用服务返回的True/False值设置Yes/No单选按钮？

没问题，这个需求其实挺常见的——HTML本身确实没法直接根据后端返回的True/False自动绑定单选框的选中状态，咱们用JavaScript（或者你常用的前端框架）就能轻松搞定，给你几种不同场景的实现方案：

1. 原生JavaScript（无框架）实现 #

先给单选按钮加上明确的标识（比如id），方便JS定位元素：

<input type="radio" name="response" id="yesRadio" value="Yes">
<label for="yesRadio">Yes</label>

<input type="radio" name="response" id="noRadio" value="No">
<label for="noRadio">No</label>

假设你已经通过接口请求拿到了服务返回的布尔值（比如存在serviceResult变量里），直接用JS设置选中状态即可：

// 模拟服务返回的布尔值，实际项目中替换为接口返回结果
const serviceResult = true; // 也可能是false

const yesRadio = document.getElementById('yesRadio');
const noRadio = document.getElementById('noRadio');

// 根据返回值切换选中状态
yesRadio.checked = serviceResult;
noRadio.checked = !serviceResult;

2. Vue.js 框架实现 #

用Vue的话可以直接通过v-model双向绑定简化操作，不用手动操作DOM：

<template>
  <div>
    <input type="radio" name="response" v-model="selectedStatus" :value="true">
    <label>Yes</label>

    <input type="radio" name="response" v-model="selectedStatus" :value="false">
    <label>No</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedStatus: false // 初始占位值
    };
  },
  mounted() {
    // 模拟调用接口获取结果
    const fetchStatus = async () => {
      const result = await fetch('/api/get-status').then(res => res.json());
      this.selectedStatus = result; // 直接赋值给绑定变量即可
    };
    fetchStatus();
  }
};
</script>

3. React 框架实现 #

React里可以通过状态管理来控制单选框的checked属性：

import { useState, useEffect } from 'react';

function StatusRadio() {
  const [serviceResult, setServiceResult] = useState(false);

  useEffect(() => {
    // 模拟请求服务获取结果
    const getStatus = async () => {
      const res = await fetch('/api/get-status');
      const result = await res.json();
      setServiceResult(result);
    };
    getStatus();
  }, []);

  return (
    <div>
      <input
        type="radio"
        name="response"
        checked={serviceResult}
        onChange={() => setServiceResult(true)}
      />
      <label>Yes</label>

      <input
        type="radio"
        name="response"
        checked={!serviceResult}
        onChange={() => setServiceResult(false)}
      />
      <label>No</label>
    </div>
  );
}

export default StatusRadio;

核心逻辑其实很简单：HTML负责静态结构，动态状态的控制必须借助JavaScript——不管是原生操作DOM还是框架的状态绑定，本质都是根据服务返回的布尔值，切换对应单选框的checked属性。

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