在JavaScript中转换API返回对象为布尔值的方法（Angular场景）

问题核心是API返回的是包含字符串类型'true'/'false'的对象（比如{bookmarked: 'true'}），而你的代码错误地将整个对象赋值给了this.bookmarked，导致它不是布尔值，而是对象，所以页面显示[object Object]。

有两种直接的解决方式：

方式一：在组件订阅时直接转换 #

修改addToBookmark方法中的订阅逻辑，提取响应对象里的bookmarked字段，并将字符串值转为布尔值：

addToBookmark(): void {
  if (this.bookmarked) {
    this.bookmarkSubs = this.bookmarksService
      .removeFromBookmark(this.id)
      .subscribe((response: { bookmarked: string }) => {
        // 将字符串'true'/'false'转为布尔值
        this.bookmarked = response.bookmarked === 'true';
        console.log(this.bookmarked);
      });
  } else {
    this.bookmarkSubs = this.bookmarksService
      .addToBookmark(this.id)
      .subscribe((response: { bookmarked: string }) => {
        this.bookmarked = response.bookmarked === 'true';
        console.log(this.bookmarked);
      });
  }
}

方式二：在服务层统一处理（更优雅） #

如果希望组件无需重复处理响应格式，可以在bookmarksService的方法里统一将API返回的对象转为布尔值，通过RxJS的map操作符转换：

// bookmarksService中的方法示例
addToBookmark(id: number): Observable<boolean> {
  return this.http.post<{ bookmarked: string }>('/your-api-url', { id })
    .pipe(
      // 将API返回的字符串值转为布尔值后再返回给组件
      map(response => response.bookmarked === 'true')
    );
}

removeFromBookmark(id: number): Observable<boolean> {
  return this.http.delete<{ bookmarked: string }>(`/your-api-url/${id}`)
    .pipe(
      map(response => response.bookmarked === 'true')
    );
}

修改服务后，你原来组件里的代码可以保持不变，因为服务现在返回的就是布尔值，this.bookmarked会被正确赋值为true或false，页面的*ngIf判断也能正常工作。

额外提示 #

记得在组件销毁时取消订阅，避免内存泄漏：

ngOnDestroy(): void {
  this.bookmarkSubs?.unsubscribe();
}

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