不显示里面使用 *ngFor 循环？,html,typescript,ionic-framework,ionic4"/>
时间戳

首页 > 解决方案 > 为什么不显示里面使用 *ngFor 循环？

html - 为什么不显示里面使用 *ngFor 循环？

问题描述

我有一些代码旨在显示用户个人资料图片，无论是默认图片还是用户上传的图片。现在， img [src]="profileImage" 本身就完美地显示了图像。但是，当我将其放入 ion-col 时，它不会显示。

下面是我正在使用的以下代码

HTML

 <ion-col *ngFor="let item of students" >
     <div  class= "imageHold" >
         <img [src]= "profileImage"> 
     </div>
 </ion-col>

TS

export class EditProfilePage implements OnInit {



  profileImage : any;

  ngOnInit() {
  this.profileImage =  ["./assets/imgs/user.png"]

this.students = data.map(e => {
        return {
          id: e.payload.doc.id,
          isEdit: false,
          userName: e.payload.doc.data()['userName'],
          userBio: e.payload.doc.data()['userBio'],
          profileImage: e.payload.doc.data()['profileImage'],
        };
      })
      console.log(this.students);

    }

上传个人资料图片的firebase代码片段

  this.firebaseService.uploadImage(image_src, randomId)
    .then(photoURL => {
      this.profileImage = photoURL;
      loading.dismiss();
      toast.present();

标签： htmltypescriptionic-frameworkionic4

解决方案

你有 profileImage 作为字符串数组，并且 [src] 只接受字符串

试试这样

this.profileImage =  "./assets/imgs/user.png"; //don't declare this as string

或者如果您有多个图像，则尝试使用索引

this.profileImage =  ["./assets/imgs/user.png","./assets/imgs/user1.png"]

在 HTML 中

 <img [src]= "profileImage[0]">

推荐阅读