Question

将图库加载到我的图库应用中后，将调用一个函数来检查当前用户是否喜欢图像数组中的图像。如果用户喜欢该图像，则在图像上方会显示一个实心图标。如果不喜欢该图像，则会显示心脏轮廓图标。

在函数中，我们获得用户数组中的当前用户索引。该信息是从存储在浏览器本地存储中的用户对象检索到的。我遇到的问题是在从本地存储中检索用户数据之前调用了该函数，我不确定如何解决此问题？

以下是图库列表组件中的相关html：

<div class="gallery-container">
    <div
      class="image-container"
      *ngFor="let image of galleryList">
      <div *ngIf="checkLike(image.imagePath)" class="heart-icon-container">
        <ion-icon name="heart" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
      </div>
      <div *ngIf="!checkLike(image.imagePath)" class="heart-icon-container">
        <ion-icon name="heart-outline" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
      </div>
    </div>
</div>

这是来自gallery-list ts文件的相关代码：

  currUsersIndex: number;

ngOnInit() {

    this.currUsersIndex = this.usersService.getCurrUserArrIndex();

}



 checkLike(imageUrl: string): boolean {
    const users = this.usersService.getUsers();

    if(this.isLoggedIn) {
      const FavouritesList = users[this.currUsersIndex].likes;

      if(FavouritesList.includes(imageUrl)) {
          return true;
      } else {
          return false;
      }
  }
    }

最后，这是从users.service文件中检索用户索引的地方：

private users: User[] = [];
 getCurrUserArrIndex() {

        const usersEmail = this.getCurrentUser().email;

        const users = this.getUsers();

        const usersIndex = users.findIndex(user => user.email === usersEmail);

        return usersIndex;

        }


 getCurrentUser() {

    const userData: {

         email: string,
         id: string,
         _token: string,
         _tokenExpirationDate: string

     } = JSON.parse(localStorage.getItem('authUserData')); 

 return userData;

 }



    getUsers() {
        return this.users.slice();
    }

请注意，用户数组最初设置为空，但是在应用初始化时，它是与firebase数据库中的用户一起设置的。

我在控制台中收到的错误消息是："can't access property "likes", users[this.currUsersIndex] is undefined"

Answer 1

我认为，这里的问题是在HTML中调用this.currUsersIndex时未设置 checkLike() 。

或者我可以建议您在组件中定义一个布尔变量，

checkLike = false;

，然后在设置 currUsersIndex

后调用函数checkLike（）

ngOnInit() {
    this.currUsersIndex = this.usersService.getCurrUserArrIndex();
    this.checkLike();
}

checkLike(imageUrl: string): boolean {
    const users = this.usersService.getUsers();
    if(this.isLoggedIn) {
      const FavouritesList = users[this.currUsersIndex].likes;
      if(FavouritesList.includes(imageUrl)) {
          this.checkLike = true;
      } else {
          this.checkLike = false;
     }
  }

您必须已经在组件中具有imageUrl。只需将其替换。

Answer 2

您不需要将IMO分开。您可以将代码更新为此，这将是防错的。

checkLike(imageUrl: string): boolean {
    const user = this.usersService.getCurrentUser();

    if(user && user.likes) {
      const FavouritesList = user.likes;
      return FavouritesList.includes(imageUrl);
    }

    return false
}

getCurrentUser() {
  const userData: {
        email: string,
        id: string,
        _token: string,
        _tokenExpirationDate: string
    } = JSON.parse(localStorage.getItem('authUserData')); 

  const userEmail = userData.email;

  const users = this.getUsers();
  return users.find(user => user.email === usersEmail);
}

等待从本地存储中检索数据

2 个答案: