Typescript 图像下载卡在存储中的循环中

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

这是我的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;
  }

}

从'@angular/core'导入{Injectable}；
从“angularfire2/firestore”导入{AngularFirestoreCollection，AngularFirestore}；
从“../interfaces/User”导入{User}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map}；
@注射的({
providedIn:'根'
})
导出类管理员服务{
私有用户集合：AngularFirestoreCollection；
公共用户：可观察；
建造师(
私人数据库：AngularFirestore，
) { }
getUsers（）{
this.userCollection=this.db.collection（'users'）；
this.users=this.userCollection.snapshotChanges（）.pipe(
map（（actions）=>actions.map（a=>{
const data=a.payload.doc.data（）作为用户；
const id=a.payload.doc.id；
返回{id，…data}；
}))
);
将此文件返回给用户；
}
}

这是我的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();
  }


}

从'@angular/core'导入{Component，OnInit，OnDestroy}；
从“rxjs”导入{Subscription，Observable}；
从“../../interfaces/User”导入{User}；
从“../../services/admin.service”导入{AdminService}；
从“angularfire2/storage”导入{AngularFireStorage}；
@组成部分({
选择器：“应用程序管理页”，
templateUrl:'./admin page.component.html'，
样式URL:['./管理页面.component.scss']
})
导出类AdminPageComponent实现OnInit{
公共角色：字符串[]=[
“用户”，
“主管”，
“管理员”
];
checkModel:any={user:false，supervisor:true，admin:false}；
私人订阅：订阅[]=[]；
公共用户：可观察；
档案图像：任何；
建造师(
专用adminService:adminService，
专用存储：AngularFireStorage
) {
}
恩戈尼尼特（）{
this.users=this.adminService.getUsers（）；
}
getImage（photoUrl）{
console.log（photoUrl）；
返回此.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}{{user.lastName}}
{{user.email}
用户角色
拯救

---

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

您在photoUrl中存储了哪些数据？我只需设置Firebase Storage提供的下载url，并将其设置为普通：

---

img src=“{user.photoUrl}}”

好吧，这对我来说很有用：一个返回一个可观察值的管道：

。。。。 const ref=此.storage.ref（值）； return ref.getDownloadURL（）

---

在模板中：img[src]=“img | picturePie | async”

安全性文件路径。不确定是否可以在那里调用函数。。。你试过用烟斗吗？类似于：并创建一个管道，将user.photoUrl转换为这个.storage.ref（

${photoUrl}

）.getDownloadURL（）；