Angular中如何在Snackbar中展示对象数据？

你已经做对了核心步骤——解析JSON拿到了WebService对象，只是调用Snackbar的时机和方式不对，才导致了[Object][Object]的奇怪显示。咱们来一步步修复：

问题根源 #

你当前的代码是先把原始的data（可能是JSON字符串，也可能已经是JS对象）直接拼接到提示文本里传给Snackbar，而不是用解析后的webService对象的具体属性。如果data是对象，JavaScript会自动把它转成"[object Object]"字符串，这就是你看到异常显示的原因。

解决方案 #

调整代码顺序，先安全解析数据，再用解析后的对象属性构建清晰的提示文本：

this.messageService.messageReceived$.subscribe(data => {
  // 先安全解析数据：兼容data是字符串或已解析对象的情况
  let webService: WebService;
  try {
    webService = typeof data === 'string' ? JSON.parse(data) : data;
  } catch (error) {
    console.error('解析WebService数据失败:', error);
    this.snakbar.statusBar("Platform job Completed - 未知状态", "Error");
    this.spinner.hide();
    return;
  }

  // 根据业务状态码判断成功/失败（这里假设code=200代表成功，可根据实际调整）
  const status = webService.code === 200 ? 'Success' : 'Failure';
  // 用模板字符串构建友好的提示文本
  const snackbarText = `Platform job Completed - ${status}: ${webService.message}`;

  // 现在调用Snackbar显示正确内容
  this.snakbar.statusBar(snackbarText, "Info");

  // 后续的日志和页面操作
  console.log(webService.message);
  console.log(webService.executionId);
  console.log(webService.code);
  this.spinner.hide();
  this.selectedIndex = 1;
});

关键调整说明 #

• 先解析再展示：把解析数据的步骤放在调用Snackbar之前，确保我们用的是webService对象里的message、code等具体属性，而不是原始的data。
• 安全解析：增加了typeof判断和try-catch，避免如果data格式异常（比如不是合法JSON）导致整个流程崩溃。
• 友好文本构建：用ES6模板字符串拼接状态（Success/Failure）和具体消息，让用户一眼就能看懂作业结果和详情。
• 状态码适配：你可以根据实际业务逻辑调整code的判断条件，比如如果成功状态码是0或者其他值，直接修改判断逻辑即可。

这样调整后，你的Snackbar就会显示类似Platform job Completed - Success: 作业ID xxx执行完成或者Platform job Completed - Failure: 连接数据库超时的清晰内容了。

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