Angular/TypeScript：HTTP响应接收后更新HTML内容

看起来你已经有了一个基础的HTTP请求逻辑，我来帮你完善它并实现把JSON响应数据展示到HTML页面的功能——从你的代码片段来看，应该是用Angular的HttpClient发起请求的，那我就基于这个场景给你完整的解决方案：

1. 补全并优化TypeScript逻辑 #

先把你未写完的代码补全，同时加上错误处理和状态提示，让逻辑更健壮：

// 你的组件类代码
import { Component } from '@angular/core';
import { HttpProblemsService } from './http-problems.service'; // 引入你的请求服务

@Component({
  selector: 'app-verifier-results',
  templateUrl: './verifier-results.component.html',
  styleUrls: ['./verifier-results.component.css']
})
export class VerifierResultsComponent {
  // 声明存储输出的变量
  professorOutputTestCase: string = '';
  outputStudent: string = '';
  // 给用户展示请求状态（加载中、错误等）
  statusMessage: string = '';

  constructor(private _httpProblemsService: HttpProblemsService) {}

  submitVerifier(codeObject: any) {
    // 发起请求前设置加载状态，清空旧输出
    this.statusMessage = '正在验证代码，请稍等...';
    this.professorOutputTestCase = '';
    this.outputStudent = '';

    this._httpProblemsService.submitVerifierTool(codeObject).subscribe(
      data => {
        this.statusMessage = ''; // 清空状态提示
        // 验证成功的分支
        if (data.status_server === "successful run" && data.status_student === "successful run") {
          this.professorOutputTestCase = data.output_server;
          this.outputStudent = data.output_student; // 补全你未写完的属性赋值
        } else {
          // 验证失败时给出具体提示
          this.statusMessage = `验证未通过：服务器执行状态${data.status_server}，你的代码执行状态${data.status_student}`;
        }
      },
      error => {
        // 处理HTTP请求失败的情况（比如网络错误、后端报错）
        this.statusMessage = `请求出错了：${error.message}`;
        console.error('请求详情:', error); // 控制台打印错误方便调试
      }
    );
  }
}

2. 在HTML模板中绑定并展示数据 #

接下来把组件里的变量绑定到HTML上，用Angular的插值表达式就能自动同步数据，页面会在变量更新时自动刷新：

<!-- verifier-results.component.html -->
<div class="verifier-container">
  <!-- 状态提示区域 -->
  <div *ngIf="statusMessage" class="status-notice">{{ statusMessage }}</div>

  <!-- 教授的测试用例输出 -->
  <div class="output-block" *ngIf="professorOutputTestCase">
    <h3>教授测试用例输出</h3>
    <pre class="output-content">{{ professorOutputTestCase }}</pre>
  </div>

  <!-- 学生代码的输出 -->
  <div class="output-block" *ngIf="outputStudent">
    <h3>你的代码输出</h3>
    <pre class="output-content">{{ outputStudent }}</pre>
  </div>
</div>

这里用<pre>标签是为了保留输出内容的原始格式（比如换行、空格），适合展示代码执行的输出结果；*ngIf用来控制元素的显示隐藏，只有当变量有值时才会渲染对应的区域。

3. 原生TypeScript（非框架）的实现方案 #

要是你没用Angular这类框架，用原生TS实现的话逻辑也很简单——手动获取DOM元素，然后把数据赋值给元素内容：

// 原生TS请求示例
fetch('/your-api-endpoint', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(codeObject)
})
.then(response => response.json())
.then(data => {
  if (data.status_server === "successful run" && data.status_student === "successful run") {
    // 获取DOM元素并赋值
    document.getElementById('professor-output')!.textContent = data.output_server;
    document.getElementById('student-output')!.textContent = data.output_student;
  } else {
    document.getElementById('status-message')!.textContent = `验证失败：${data.status_server} / ${data.status_student}`;
  }
})
.catch(error => {
  document.getElementById('status-message')!.textContent = `请求出错：${error.message}`;
});

对应的HTML：

<div>
  <div id="status-message"></div>
  <div>
    <h3>教授测试用例输出</h3>
    <pre id="professor-output"></pre>
  </div>
  <div>
    <h3>你的代码输出</h3>
    <pre id="student-output"></pre>
  </div>
</div>

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