图像下载卡在角度消防仓库的循环中

Question

我正在尝试从他们的文件路径加载用户图像，该文件路径作为照片URL存储在user.photoUrl中。

这是我的admin.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestoreCollection, AngularFirestore } from 'angularfire2/firestore';
import { User } from '../interfaces/user';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AdminService {
  private userCollection: AngularFirestoreCollection<User>;
  public users: Observable<User[]>;
  constructor(
    private db: AngularFirestore,
  ) { }
  getUsers() {
    this.userCollection = this.db.collection<User>('users');
    this.users = this.userCollection.snapshotChanges().pipe(
      map((actions) => actions.map(a => {
        const data = a.payload.doc.data() as User;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    return this.users;
  }
}

这是我的admin-page.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, Observable } from 'rxjs';
import { User } from '../../interfaces/user';
import { AdminService } from '../../services/admin.service';
import { AngularFireStorage } from 'angularfire2/storage';
@Component({
  selector: 'app-admin-page',
  templateUrl: './admin-page.component.html',
  styleUrls: ['./admin-page.component.scss']
})
export class AdminPageComponent implements OnInit {
  public roles: string[] = [
    'user',
    'supervisor',
    'admin'
  ];
  checkModel: any = { user: false, supervisor: true, admin: false };
  private subscriptions: Subscription[] = [];
  public users: Observable<User[]>;
  profileImage: any;
  constructor(
    private adminService: AdminService,
    private storage: AngularFireStorage
  ) {
  }
  ngOnInit() {

    this.users = this.adminService.getUsers();
  }
  getImage(photoUrl) {
    console.log(photoUrl);
    return this.storage.ref(`${photoUrl}`).getDownloadURL();
  }

}

这是管理 HTML 组件：

<div class="row">
  <div class="container">
    <h1>Admin Page</h1>
    <div *ngFor="let user of users | async; index as i " class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <form (ngSubmit)="submit()">
        <div class="card" style="width: 18rem;">
          <img class="card-img-top" [src]="getImage(user.photoUrl)" alt="Card image cap">
          <div class="card-body">
            <h6>{{user.firstName}} {{user.lastName}}</h6>
            <h6>{{user.email}}</h6>
            <h5 class="card-title">User Roles</h5>
            <button type="submit" class="btn btn-success">Save</button>
          </div>
        </div>
      </form>
    </div>
  </div>

我能够获取每张卡的user.firstName和所有其他数据属性，但不能获取图像。它只是陷入循环并崩溃。

Answer 1

嗯，这对我有用：一个返回可观察量的管道：

.... const ref = this.storage.ref(value(; 返回 ref.getDownloadURL((;

在模板中：img [src]="img | picturePipe | async">

Answer 2

你在photoUrl中存储了哪些数据？我只需设置Firebase Storage提供的下载网址，并得到简单： img src="{{user.photoUrl}}"