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

您将哪些数据存储在photoUrl中？我只需设置Firebase Storage提供的下载URL并使其简单明了： img src =“ {{user.photoUrl}}”

Answer 2

好吧，这对我有用：返回可观察值的管道：

... const ref = this.storage.ref（value）; 返回ref.getDownloadURL（）;

，并在模板中：img [src] =“ img | picturePipe |异步”

图像下载陷入Angular Firestorage的循环中

2 个答案: