从 API 读取收藏夹数组后如何切换`<mat-icon>`答案

【问题标题】：How to Toggle a `<mat-icon>` after reading a favorites array from the API从 API 读取收藏夹数组后如何切换`<mat-icon>`
【发布时间】：2022-01-09 17:42:46
【问题描述】：

我正在为我参与的某个项目开展一个项目，但目前我的作业遇到了问题。我正在使用 Angular 来构建程序，并且我构建了一个小的 API 来从中提取数据。目标：根据项目（在本例中为电影）是否已添加到用户的 `FavoriteMovies` 集合中，将 `favorite` 切换为 `favorite_border`。

HTML sn-p:

<mat-icon
  *ngIf="!inFavorites(movie._id)"
  (click)="addFavMovie(
    movie._id,
    movie.Title)"
>
  favorite_border
</mat-icon>
<mat-icon
  *ngIf="inFavorites(movie._id)"
  (click)="removeFavMovie(
    movie._id,
    movie.Title
  )"
 >
   favorite
 </mat-icon>

我的 `.ts` 文件中的一些代码：

export class MovieCardComponent implements OnInit {
  movies: any[] = [];
  genres: any[] = [];
  favorites: any[] = [];

  constructor(
    public fetchApiData: FetchApiDataService,
    public dialog: MatDialog,
    public snackBar: MatSnackBar,
  ) { }

  ngOnInit(): void {
    this.getMovies();
    this.getFav();
  }

  getMovies(): void {
    this.fetchApiData.getAllMovies().subscribe((resp: any) => {
      this.movies = resp;
      return this.movies;
    })
  }

  getFav(): void {
    const user = localStorage.getItem('user');
    this.fetchApiData.getUser(user).subscribe((resp: any) => {
      this.favorites = resp.FavoriteMovies;
      return (this.favorites);
    });
  }
...

  addFavMovie(movieId: string, title: string): void {
    this.fetchApiData.addFavoriteMovies(movieId).subscribe((resp: any) => {
      console.log(resp);
      this.snackBar.open(`You added ${title} to your favorites list`, 'OK', {
        duration: 4000,
      });
      this.ngOnInit();
    });
   
    return this.getFav();
  }

  removeFavMovie(movieId: any, title: string): void {

    this.fetchApiData.deleteMovie(movieId).subscribe((resp: any) => {
      console.log(resp);
      this.snackBar.open(`You successfully removed ${title} from your favorites list`, 'OK', {
        duration: 4000,
      });
    });
    this.ngOnInit();
    return this.getFav();
  }

  inFavorites(movieId: any): boolean {
    if (this.favorites.indexOf(movieId) > -1) {
      return true;
    } else {
      return false;
    }
  }

最后是`fetch-api-data.services`中API的路由

getUser(username: any): Observable<any> {
    const token = localStorage.getItem('token');
    return this.http.get(apiUrl + 'users/' + username, {
      headers: new HttpHeaders(
        {
          Authorization: 'Bearer ' + token,
        })
    }).pipe(
      map(this.extractResponseData),
      catchError(this.handleError)
    );
  }

    // Making the API call for calling a list of the user's favorite movies
  getFavoriteMovies(username:any): Observable<any> {
    const token = localStorage.getItem('token');
    return this.http.get(apiUrl + 'users/' + username + '/movies', {
      headers: new HttpHeaders(
        {
          Authorization: 'Bearer ' + token,
        })
    }).pipe(
      map(this.extractResponseData),
      catchError(this.handleError)
    );
  }

  // Making the API call for adding movies to profile
  addFavoriteMovies(movieId:any): Observable<any> {
    const username = localStorage.getItem('user')
    const token = localStorage.getItem('token');
    return this.http.post(apiUrl + 'users/' + username + '/movies/' + movieId, null, {
      headers: new HttpHeaders(
        {
          Authorization: 'Bearer ' + token,
        })
    }).pipe(
      map(this.extractResponseData),
      catchError(this.handleError)
    );
  }

最后但并非最不重要的一点是，如果这还不足以帮助我切换图标，这里是我的 GitHub 存储库，供任何可能提供帮助的人使用：https://github.com/zeusrahl/myFlix-Angular-client。我知道我的代码还有其他问题，但是现在，我的重点是从用户那里“添加收藏夹”或“删除收藏夹”，以便主页（以及用户的个人资料）可以阅读它页）。提前谢谢你。

【问题讨论】：

标签： angular function api toggle mat-icon

【解决方案1】：

此问题已解决。似乎我的inFavorites 函数试图像this.favorites 是一个数组一样工作，而我需要传递的只是API 的._id。以下是需要修复的代码区域：

getFav(): void {
    const user = localStorage.getItem('user');
    this.fetchApiData.getUser(user).subscribe((resp: any) => {
      this.favorites = resp.FavoriteMovies.map((x: any) => x._id);
      console.log(this.favorites);
      return (this.favorites);
    });
  }

【讨论】：