Javascript Angular 10-html模板根据变量显示不正确的信息

我对Angular（使用Angular 10）几乎是新手，也许这是一件非常简单的事情，但我无法理解。在info组件中，我从服务器上的表中获取当前用户详细信息和当前书籍详细信息，并根据3个变量切换html模板中的按钮

如果用户是publisher（publisherMenu）->显示publisher菜单，如果不是（！publisherMenu）->显示常规用户菜单。这个正在工作。publisherMenu变量在响应中为true或false，模板立即加载正确的按钮对

但问题在于“立即购买”和“添加到愿望列表”按钮。当你点击其中一个按钮时，它们会变成你自己的，并出现在你的愿望列表中。这没关系，但如果我在那之后再看同一本书，按钮现在就回来买，并添加到愿望列表中。如果我刷新页面，它们会得到修复，但只有在我刷新页面时才会修复。如果我导航到另一个页面并返回到该页面，同样，按钮不正常

这两个按钮取决于BookBuyed和inWishlist变量。对于这两种类型，我都以字符串形式获取信息，将其拆分为一个数组并搜索用户Id，然后分别输入true/false

如果我在浏览器中调试，一切正常，按钮显示正确的文本。。。现在函数在构造函数中，我试着将它放在ngOnInit（）中，但没有区别

任何帮助都将不胜感激

谢谢大家!

info.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import Backendless from 'backendless';
import { BookService } from '../book.service';
import { UserService } from 'src/app/user/user.service';


@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})

 export class DetailComponent implements OnInit { 

 currentBookData;
 currentUserData;
 publisherMenu: Boolean = false;
 bookBought: Boolean = false;
 inWishlist: Boolean = false;

constructor(private router: Router, private bookService: BookService, private userService: UserService) {

//get book data
let getBookData = Backendless.Data.of('books').findById({objectId})
.then(currentBook => {
//console.log('Current Data: ' + JSON.stringify(currentBook));
return currentBook;
})
.catch(error => {
console.log(error);
});

getBookData.then(result => {
  console.log(JSON.stringify(current book));
  this.currentBookData = result; 
})


//  get user data
let getUserData = Backendless.UserService.getCurrentUser()
.then(function(currentUser) {
return currentUser;
 })
.then(result => {
   this.currentUserData = result;  
   console.log('currentUser :' + JSON.stringify(result));
   if (this.currentUserData.publisher) {
     this.publisherMenu = true;
   } else {
  this.publisherMenu = false;
}
if(!this.currentUserData.wishlist) {
  this.inWishlist = false;
} else {
let currentWishlist = this.currentUserData.wishlist.split(',');
if(currentWishlist.indexOf(this.currentGameData.objectId) !== -1) {
  this.inWishlist = true;
} else {
  this.inWishlist = false;
}
}
if(!this.currentUserData.orders) {
  this.bookBought = false;
} else {
let currentOrders = this.currentUserData.orders.split(',');
if(currentOrders.indexOf(this.currentBookData.objectId) !== -1) {
  this.bookBought= true;
} else {
  this.bookBought= false;
}
 }
 })
 .catch(function (error) {
   console.error(error)
  })

//当前图书id:88443C15-9CEB-4FF2-B174-D88D7F3324D3

控制台日志

current book :{"title":"Demo Book","ownerId":"7B8EF09F-9DF3-4CED-A6B7-
39C3CD90089D","sales":1,"price":"31.99","___class":"books","orders":"B63744A3- 
C3C3-4FC5-8CF4-3FCD131A0929","updated":1607770188000,"objectId":"88443C15- 
9CEB-4FF2-B174-D88D7F3324D3"}

currentUser :{"___class":"Users","wishlist":"D8005359-AFD5-487F-B130- 
3012AF3A7F1E,63DD9C7D-36D5-4CCA-96A3-81BFCBCE92CD,88443C15-9CEB-4FF2-B174-        
D88D7F3324D3,100D4187-5B37-4FD4-ADA3-77AE1392F905,96BD531E-B717-4AEB-8DA5- 
51805143EC07","ownerId":"B63744A3-C3C3-4FC5-8CF4-3FCD131A0929","name":"Demo 
User","publisher":false,"orders":"0BF4737D-F1C4-49C0-AD7A- 
40279CF0E3CD,D8005359-AFD5-487F-B130-3012AF3A7F1E,88443C15-9CEB-4FF2-B174- 
D88D7F3324D3,100D4187-5B37-4FD4-ADA3-77AE1392F905,96BD531E-B717-4AEB-8DA5- 
51805143EC07","email":"demo@demo.demo","objectId":"B63744A3-C3C3-4FC5-8CF4- 
3FCD131A0929"}

第一页加载时或浏览页面并返回后的IFs结果：

 publisherMenu :false
 bookBought :false
 inWishlist :false

如果我刷新页面，则来自IFs的结果：

 publisherMenu: false
 bookBought: true
 inWishlist: true

info.component.html

<div *ngIf="!publisherMenu" class="book-buttons">
            <a *ngIf="!bookBought" (click)="buyBook(currentBookData.objectId)">Buy Now</a>
            <a *ngIf="bookBought">You own it</a>
             <br><br>
             <a *ngIf="!inWishlist" (click)="addBookToWishlist(currentBookData.objectId)">Add To Wishlist</a>
            <a *ngIf="inWishlist">In your Wishlist</a>
         </div>

        <div *ngIf="publisherMenu" class="book-buttons">
            <a [routerLink]="['../../add']">Add Book</a> 
  <br><br>
            <a [routerLink]="['../../my-books']">My Books</a>
            </div>

立即购买
你拥有它



添加到愿望列表
在你的愿望清单上
添加书本



我的书

---

编辑：我现在明白了，如果我不手动刷新页面，我只会获得当前书籍的详细信息，而没有当前用户的详细信息，我想这就是原因，但是为什么第二个函数与第一个函数不一样，因为它们实际上是一样的

当您重新访问页面时，是否发送了获取用户数据的请求？你能在那部分放一些

控制台.log

-s吗？

bookbuyed

和

inWishlist

的值在哪里变化？这样我们可以检查是否有正确的响应。请求应该发送，但我认为这不是出于某种原因。但是，如果我刷新页面，它将被发送。作为下一步，我建议调查，

backfundle.UserService.getCurrentUser

在页面未刷新时会发生什么情况，只会重新访问。重新访问页面时，是否发送了获取用户数据的请求？你能在那部分放一些

控制台.log

-s吗？

bookbuyed

和

inWishlist

的值在哪里变化？这样我们可以检查是否有正确的响应。请求应该发送，但我认为这不是出于某种原因。但是如果我刷新了正在发送的页面，那么它将被发送。作为下一步，我建议调查，

backfundle.UserService.getCurrentUser

中发生了什么，当页面没有刷新时，只会重新访问。