イメージは角4でレンダリングされていません

Question

現時点で私は作成しようとしているこのウェブサイトのバックエンドとしてfirestoreを使用しようとしています。画像の一部が表示されています。ファイアストアには3つのアイテムが保管されています。私はそれらをウェブサイトにロードしたときに、最後の2枚の画像のみが表示され、最初の画像は表示されません。それはfirestoreとか、私は

にHTMLやタイプコードを、それをコード化された方法に問題がある場合、私は画像

<div class="container-fluid"> 
    <h3>Appliances</h3> 
    <p></p> 
    <p></p> 
    <div class="row"> 
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar"> 
    </div> 
    <div class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content"> 
     <div class="row"> 
     <div *ngFor="let appliance of appliances | async; let i = index"> 
      <div class="row"> 
      <div class="col-xs-3 px-2"> 
       <p><img src="{{appliance.img}}" width="200" alt=""></p> 
       <p class="text-center">{{appliance.name}}</p> 
      </div> 
      <div class="col-xs-6 px-2"> 
       <p>desciption</p> 
      </div> 
      <div class="col-xs-3 px-4"> 
       <button class="btn btn-success" type="button" name="button" (click)="addToCart(i)">Add to Cart</button> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 


import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../services/data.service'; 
import { Appliances } from './appliances'; 
import { Observable } from 'rxjs/Observable'; 
import { FormBuilder, FormArray, FormGroup, FormControl, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-appliances', 
    templateUrl: './appliances.component.html', 
    styleUrls: ['./appliances.component.css'] 
}) 
export class AppliancesComponent implements OnInit 
{ 
    appliances: Observable<any[]>; 
    applianceForm: FormGroup; 
    constructor(private dataService: DataService) 
    { 
    } 

    ngOnInit() 
    { 
    this.appliances = this.dataService.getStore(); 
    } 

    addToCart(item: number) 
    { 
    this.dataService.addApplianceToCart(item); 
    } 
} 

を表示するコンポーネントのためにこれをロードしているサービスであるされているかわかりませんヘルプをいただければ幸いです

import { Injectable } from '@angular/core'; 
import { Food } from '../food/food'; 
import { Appliances } from '../appliances/appliances'; 
import { Goods } from '../models/goods'; 
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; 
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class DataService 
{ 
    foods: Food[]; 
    appliances: Appliances[]; 
    storeCol: AngularFirestoreCollection<Goods>; 
    store: Observable<Goods[]>; 
    userCol: AngularFirestoreCollection<any>; 
    private cart: any[]; 
    constructor(private afs: AngularFirestore) 
    { 
    this.storeCol = this.afs.collection('goods'); 
    this.userCol = this.afs.collection('accounts'); 
    this.store = this.storeCol.valueChanges(); 

    this.cart = []; 
    } 

    getStore() 
    { 
    return this.store; 
    } 

    getFoods() 
    { 
    return this.foods; 
    } 

    getAppliances() 
    { 
    return this.appliances; 
    } 

    addFoodToCart(item: number) 
    { 
    console.log('added'); 
    //this.afs.collection('accounts').doc('ani').collection('cart').add({name: this.foods[item].getName()}) 
    this.cart.push(this.foods[item]); 
    } 

    addApplianceToCart(item: number) 
    { 
    this.cart.push(this.appliances[item]); 
    } 

    getCart() 
    { 
    return this.cart; 
    } 
} 

firestoreからデータ

Answer 1

私は通常、この

のように結合属性を使用してみてください画像は