возникли проблемы с отображением сохраненных избранных

Question

Мое приложение успешно сохраняет избранное, но я не могу отобразить их.

Я могу получить избранное избранное, и оно утешается в моем браузере; однако я не могу отобразить. Я не уверен, как указать файл в моем HTML-файле.

Я получаю информацию о фильме через API. Если мне нужно добавить дополнительную информацию, пожалуйста, дайте мне знать.

Пожалуйста, сообщите. Спасибо

fav components

import { Component, OnInit } from '@angular/core';
import { SearchService } from '../search.service';
import { UserformService } from '../userform.service';

@Component({
  selector: 'app-fav',
  templateUrl: './fav.component.html',
  styleUrls: ['./fav.component.css']
})
export class FavComponent implements OnInit {

  constructor(public _userform: UserformService, public _search: SearchService,) { }
  user = window.sessionStorage.getItem('userId')
  token = window.sessionStorage.getItem('token')

  ngOnInit() {
    this._userform.getFave(this.user,this.token)
    .subscribe((response => {
      this._userform.faves = response
      console.log(this._userform.faves)
      console.log(response)
    })); 
  }
}

userform service



import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FavComponent } from './fav/fav.component';

@Injectable({
  providedIn: 'root'
})
export class UserformService { 
  isLoggedIn: boolean = false;
  // fave: any = {
  //   title: "",
  //   poster: ""
  // };
  
  faves:any = [];
  
  constructor(public _http : HttpClient) { }
  baseUrl: string = 'http://mean-2019-1-yuta-phortonssf.c9users.io:8080/api/appUsers';
  
  getContent(name) {
    return this._http.post(this.baseUrl, name );
  }
  
  login(name) {
    return this._http.post(this.baseUrl + '/login', name);
  }
  
  logout(token) {
    return this._http.post(this.baseUrl + '/logout/' + '?access_token=' + token, {});
  }
  
  saveFave(favorite, userId, token) {
    let favMovie = {
      title: favorite.title,
      poster: favorite.poster_path
    }
	  return this._http.post(this.baseUrl + '/' + userId + '/favs?access_token=' + token, favMovie);
  }
  
  getFave(userId,token){
	  
	  return this._http.get(this.baseUrl + '/' + userId + '/favs?access_token=' + token);
  }
  
  
  
}

<div *ngIf="!this._userform.fave" class="bg"></div>
<div class="result" *ngIf="this._userform.faves">
    <div *ngFor="let fav of this._userform.faves">
        <div class="title">{{ fav.title }}<br>
            <div class="container">
                <img class="img" src="{{ _search.imgUrl }}{{ fav.poster_path }}">
        </div>
    </div>
</div>

Answer 1

Попробуйте изменить свой HTML-шаблон следующим образом:

<div *ngIf="!this._userform.faves" class="bg"></div>
<div class="result" *ngIf="this._userform.faves">
    <div *ngFor="let fav of this._userform.faves">
        <div class="title">{{ fav.title }}<br>
            <div class="container">
                <img class="img" src="{{ _search.imgUrl }}{{ fav.poster_path }}">
            </div> 
        </div>
    </div>
</div>

, если это не решит проблему, попробуйте закомментировать все внутри * ngFor и заменить его на что-то вроде этого: {{ fav | json }} это поместит ваш любимый объект в представление json.См. Код ниже.

<code><div *ngIf="!this._userform.faves" class="bg"></div>
<div class="result" *ngIf="this._userform.faves">
    <div *ngFor="let fav of this._userform.faves">
        <pre>{{ fav | json }}

Дайте мне знать, если что-то из этого решит вашу проблему.