Question

目前我正在尝试使用firestore作为我的后端，我正在尝试创建。部分是显示图像。我在firestore中存储了3个项目。当我将它们加载到网站上时，只显示最后2个图像，而第一个图像不显示。我不知道这是火锅店的问题还是我编码的方式

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

这是从firestore

加载数据的服务

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

帮助将不胜感激

Answer 1

我经常尝试像这样使用属性绑定

<img [src]="appliance.img" [alt]="appliance.name" >

图像无法在Angular 4中渲染

1 个答案: