html - 我的愿望清单项目显示来源未知的问题

Question

我在页面上显示我的愿望清单项目时遇到问题。我正在使用 Angular 10 和 json。文我单击添加到收藏夹，它为心着色并将其添加到我的愿望清单项下的 json 文件夹中，但是当我路由到页面查看项目时，那里没有产品。我可以说它击中了 *ngFor，因为每个项目的美元金额的管道出现但没有图像。检查源时，它显示 src=unknown。

我有两个文件夹wishlist-list 和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>

//这是我的愿望清单项目服务

   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});
   }

}

//这里是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(): 无效 { }

  //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

标签： htmljsonangulartypescript