Блог

У меня возникла проблема с отображением элементов списка пожеланий на странице. Я использую Angular 10 и json. Когда я нажимаю, чтобы добавить в избранное, он окрашивает сердце и добавляет его в мою папку json в разделе «Список пожеланий», но когда я перехожу на страницу, чтобы просмотреть товары, там нет товаров. Я могу сказать, что он попадает в *ngFor, потому что появляется труба с суммой в долларах для каждого элемента, но без изображений. При проверке источника он показывает src=неизвестно.

У меня есть две папки список желаний-список и список желаний. У меня есть сервис для wishlistitem, в котором, я думаю, и заключается моя проблема. Я включил свой код.

  import { Component, OnInit, Input } from '@angular/core';
 import {ProductService} from 'src/app/services/product.service'
 import { MessengerService } from 'src/app/services/messenger.service';
 import { WishlistService } from 'src/app/services/wishlist.service';
 import { WishlistItemService } from '@app/services/wishlist-item.service';
 import { Wish} from 'src/app/models/wish';
 import {Product} from 'src/app/models/product';


  @Component({
  selector: 'app-wishlist-list',
  templateUrl: './wishlist-list.component.html',
  styleUrls: ['./wishlist-list.component.scss']
 

})

экспорт класса WishlistListComponent реализует OnInit {

      productList: Product[]= [];
     wishlistItem: Wish[]= [];
     wishItem =  []



    constructor( private msg: MessengerService,

           private productService: ProductService,

           private wishlistService: WishlistService,

           private _wishlistitemService: WishlistItemService  ) { }
 

ngOnInit(): пустота {

  this.loadWishlistList();
 

}

    loadWishlistList(){  
     this._wishlistitemService.getWishlistitem().subscribe((items: Wish[]) => {
       this.wishItem= items;
        this.msg.sendMsg("Is the item being captured"   items)
     })

    }

  }
 

//Вот мой список желаний-список HTML

               <p>wishlist-list works!</p>
                <div class="container">
                 <div class="row"> 
                  <div class="col-md-2" *ngFor="let product of wishItem">

        <app-wishlistitem [wishitemItem]="product"></app-wishlistitem>

                 </div>
                </div>
              </div>
 

//Here is my wishlist item service

    import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { wishlistitemUrl } from 'src/app/config/api';
   import { map } from 'rxjs/operators';
   import { ProductItemComponent } from '@app/shopping-cart/product-list/product- 
   item/product-item.component';
   import { Observable, of } from 'rxjs';
   import { catchError} from 'rxjs/operators';
   import {Product} from 'src/app/models/product';
   import {Wish} from 'src/app/models/wish';


    @Injectable({
    providedIn: 'root'
    })

   export class WishlistItemService {

   product:any

   wishlistitemUrl = 'http://localhost:3000/wishlistitem';

   constructor(private http: HttpClient) { }

    getWishlistitem(): Observable<Wish[]>{
     return this.http.get<Wish[]>(wishlistitemUrl)
    .pipe(
     map((result: any[]) => {
     let wishItem: Wish[]= [];

        for(let item of result) {

          let productExists = false

                            if (!productExists){

                         wishItem.push(new Wish(item.id, item.name, item.description, 
                         item.price, item.imageUrl);
                 
              }
   }

       return wishItem;
 })
);
 

}

    addProductToWishlistItem(product:Wish):Observable<any>{
      return this.http.post(wishlistitemUrl, {product});
   }
 

}

//Here is wishlistitem

   import { Component, Input, OnInit } from '@angular/core';
  import { ProductService } from 'src/app/services/product.service'
  import { WishlistService } from 'src/app/services/wishlist.service';
  import { WishlistItemService } from '@app/services/wishlist-item.service';
  import { MessengerService } from 'src/app/services/messenger.service';
  import { map } from 'rxjs/operators';
  import { Wish } from '@app/models/wish';
  import { Product } from '@app/models/product';

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

   export class WishlistitemComponent implements OnInit {



@Input() wishitemItem: Wish
@Input() productItem: Product
@Input() product: string



 constructor(private wishlistService: WishlistService, private _wishlistitemService: 
    WishlistItemService, private msg:MessengerService ) { }
 

ngOnInit(): void {
}

   //This function works as expected
  handleAddToWishlistitem(){
    this._wishlistitemService.addProductToWishlistItem (this.wishitemItem).subscribe(() 
   =>{
     alert("Get wish list item");

       this.msg.sendMsg(this.wishitemItem)
   })
  }

}


   //Here is wishlistitem Html

   <p>wishlistitem works!</p>
     <div class="test">
       <div class="container" style="margin:0 auto">
         <div class="row no-gutters" style="margin-top: 30px">
             <div class="col-4">
                  <img class="shacker"  [src]="wishitemItem.imageUrl" />
              <div class="card-body">
    
            <p class="card-text" style="text-align:left; width:130px"> 
              {{wishitemItem.name}}</p>
           <p class="card-text" style="text-align:left; width:130px;">
             <strong>{{ wishitemItem.price | currency }}</strong>
         </p>

     <p class="card-text" style="text-align:left; width: 150px"> 
      {{wishitemItem.description | slice: 0:20}}...</p>

 </div>
  </div>
   </div>
    </div>
     </div>


     //I hope the explanation is sufficient.  I have tried many scenarios, the issue I'm 
      having is with the property for the wishlist item, carItem does not have a property 
      and when I create one the application doesn't behave as expected. 


  Thank you in advance
      PDH