Angular获取Observable字符串值始终为[Object object]如何解决

接口响应值填充输入框时，实际获取到的值始终为[object Object]，异常效果如下：

服务层HttpClient请求定义：

getString(Example: example): Observable<string> {
    return this.http.post<string>(this.url + "/example", example);
}

组件层赋值逻辑：

fillInputField() {
    this.userService.getString(this.example).subscribe((result) => {
      this.inputField = result;
    });
}

运行后输入框被赋值为"[object Object]"，无法拿到预期的字符串内容。

Angular HttpClient 默认的响应解析类型为json，会自动将响应体按JSON格式解析为JavaScript对象。即使代码中声明了泛型post<string>，泛型仅做TS类型校验，不会修改HttpClient默认的解析行为：当后端实际返回纯文本内容时，默认JSON解析逻辑会把内容处理为对象，直接赋值给字符串变量时，对象隐式转换的结果就是[object Object]。

在请求配置中显式声明responseType: 'text'，告知HttpClient直接返回纯文本结果，不做JSON解析：

getString(Example: example): Observable<string> {
    return this.http.post(this.url + "/example", example, {
      responseType: 'text'
    });
}

注意：指定responseType: 'text'后，TS会自动推断返回值为Observable<string>，不需要额外添加<string>泛型声明。

• 打开浏览器开发者工具「网络」面板，定位对应接口，查看响应原文，确认后端实际返回内容格式：如果返回的是JSON结构，需要读取JSON中对应字符串字段后再赋值，不要直接将整个响应对象赋值给输入框
• 非JSON格式的接口响应，必须显式指定对应responseType，HttpClient支持的可选值为json、text、blob、arraybuffer
• 赋值前可临时打印result值到控制台，确认拿到的结果结构是否符合预期

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