我遇到错误,无法读取未定义的图像属性'profileImage',该如何解决?

时间:2019-11-21 18:26:07

标签: html angular typescript ionic-framework ionic4

我遇到以下错误

我有一个配置文件图像,当用户选择上传其图像并将其上传到Firebase存储并显示在页面上时,该图像就会显示。

使用以下代码,图片将上传到firebase,并且个人资料图片等于网址

async uploadImageToFirebase(image){

    const loading = await this.loadingCtrl.create({
      message: 'Please wait...'
    });
    const toast = await this.toastCtrl.create({
      message: 'Image was updated successfully',
      duration: 3000
    });
    this.presentLoading(loading);
    let image_src = this.webview.convertFileSrc(image);
    let randomId = Math.random().toString(36).substr(2, 5);

    //uploads img to firebase storage
    this.firebaseService.uploadImage(image_src, randomId)
    .then(photoURL => {
      this.profileImage = photoURL;
      loading.dismiss();
      toast.present();
    }, err =>{
      console.log(err);
    })
  }

我正在从Firestore检索个人资料图像,它在页面上显示正常。像这样, enter image description here

ngOnInit() {



    this.students.profileImage =  ["./assets/imgs/user.png"];
    this.profileService.read_Students().subscribe(data => {

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

    });

  }

使用下面的以下代码,当用户想要更改其用户名或用户履历时,我试图更新firestore集合。 但是,当我按“保存更改”按钮时,在控制台中出现错误“无法读取'profileImage'的属性”。

  UpdateRecord(recordRow) {
    let record = {};
    record['userName'] = recordRow.userName || "" ;
    record['profileImage'] = this.item.profileImage; 
    record['userBio'] = recordRow.userBio || "" ;
    this.profileService.update_Student(recordRow.id, record);
    recordRow.isEdit = false;
  }

这是html

  <div *ngFor="let item of students " >
      <!--     <ion-button shape="round" color="danger" size="small" (click)="RemoveRecord(item.id)">
           Remove Record
          </ion-button> -->
          <!-- this updates the user name -->
          <ion-item>   
             <ion-input  placeholder ="user name " [(ngModel)]="item.userName"></ion-input>
          </ion-item>
            <!-- this updates the user Bio -->
           <ion-item>
            <ion-textarea placeholder ="About me"  [(ngModel)]="item.userBio"></ion-textarea>
          </ion-item>
      <div style ="text-align: center">
          <ion-button (click)="UpdateRecord(item)">
              Save Changes 
            </ion-button>
          </div>



   </div>

0 个答案:

没有答案