将 JavaScript 中的 object 转换为 boolean

Question

API 返回值如下：

{bookmarked: 'false'}

或者

{bookmarked: 'true'}

代码是：

addToBookmark(): void {
    if (this.bookmarked) {
      this.bookmarkSubs = this.bookmarksService
        .removeFromBookmark(this.id)
        .subscribe((bookmarked: boolean) => {
          this.bookmarked = bookmarked;
          console.log(this.bookmarked);
        });
    } else {
      this.bookmarkSubs = this.bookmarksService
        .addToBookmark(this.id)
        .subscribe((bookmarked: boolean) => {
          this.bookmarked = bookmarked;
          console.log(this.bookmarked);
        });
    }
  }

当我在页面中显示书签值（仅用于测试目的）时，例如 {{ bookmarked }} 值是 [object Object]

我需要根据值 true 或 false 显示 2 个不同的图标。

HTML 代码：

      <button
          class="btn btn-trans tooltip bookmark"
          (click)="addToBookmark()"
      >
          Bookmark
          <fa-icon [icon]="faBookmarkRegular" *ngIf="!bookmarked"></fa-icon>
          <fa-icon [icon]="faBookmarkSolid" *ngIf="bookmarked"></fa-icon>
      </button>

我不能直接从 API 的书签值中得到真或假，因为它是 object。 如何将此 object 转换为真或假，以便在 web 页面中显示正确的图标？

谢谢大家

Answer 1

这是因为您试图在模板中打印 object。 此外， bookmarked值是一个字符串（非空字符串始终为真），而不是 boolean 将其更改为boolean 。

addToBookmark(): void {
    if (this.bookmarked) {
      this.bookmarkSubs = this.bookmarksService
        .removeFromBookmark(this.id)
        .subscribe((bookmarked: boolean) => {
          this.bookmarked = stringToBoolean(bookmarked?.bookmarked)
          console.log(this.bookmarked);
        });
    } else {
      this.bookmarkSubs = this.bookmarksService
        .addToBookmark(this.id)
        .subscribe((bookmarked: boolean) => {
          this.bookmarked = bookmarked;
           this.bookmarked = stringToBoolean(bookmarked?.bookmarked);
          console.log(this.bookmarked);
        });
    }
  }

在 util 中创建一个 function 将字符串转换为 boolean 方法：

const stringToBoolean = key => key === 'true' ? true: false;

您无需对模板进行更改。

Answer 2

看起来bookmarked是 object 属性，而不是 object 或变量。

因此，您需要像这样使用object_name.bookmarked才能工作。

或者

您可以像这样解构 object。

const {bookmarked} = apiResponseData;

现在您可以使用bookmarked了。

Answer 3

Your response is an object so a small change in your function, renamed the 'bookmarked' property to 'res' inside the subscribe arguments to avoid the similar name confusion, Now you can access the 'bookmarked' property from the response object like below:

addToBookmark(): void {
if (this.bookmarked) {
  this.bookmarkSubs = this.bookmarksService
    .removeFromBookmark(this.id)
    .subscribe((res: any) => {
      this.bookmarked = res.bookmarked;
      console.log(this.bookmarked);
    });
} else {
  this.bookmarkSubs = this.bookmarksService
    .addToBookmark(this.id)
    .subscribe((res: any) => {
      this.bookmarked = res.bookmarked;
      console.log(this.bookmarked);
    });
 }
}

一旦组件变量“this.bookmarked”的值发生变化并且模板上的条件满足，该图标就会出现在屏幕上。