无法在Ionic 4中使用图像选择器设置图像

Question

我正在Ionic 4项目中工作，并且使用了图像选择器来设置和发送图像，但是问题是它没有在HTML中设置图像。

这是我的 editprofile.page.html ：

<ion-content padding>
    <form [formGroup]="userdetailsedit" (ngSubmit)="UpdateUserDetails()">
        <ion-list>
            <ion-item class="newitem2">
                <ion-avatar class="image-center">
                  <img name="profile_pic" [src]="this.userdetailsedit.value.profile_pic"/>
                  <ion-icon (click)="imageuserchoose()" class="myicon11" name="create"></ion-icon>
                </ion-avatar> 
            </ion-item>
        </ion-list>
        <ion-button [disabled]="!userdetailsedit.valid" type="submit" color="myitem" expand="full" fill="solid">Update
        </ion-button>
    </form>
</ion-content>

在此html中，我正在显示来自服务器的图像，并且我还有一个编辑按钮，它将打开图像选择器并更新图像。但是问题在于，这不会发生，因为选择图像后，它并没有设置图像。

这是我的 editprofile.page.ts ：

import { Component, OnInit } from '@angular/core';
import { LoadingController, ModalController } from '@ionic/angular';
import { NavController, NavParams } from '@ionic/angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ChakapiService } from './../service/chakapi.service';
import { Storage } from '@ionic/storage';
import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { Base64 } from '@ionic-native/base64/ngx';  
import { FilePath } from '@ionic-native/file-path/ngx';

@Component({
  selector: 'app-editprofile',
  templateUrl: './editprofile.page.html',
  styleUrls: ['./editprofile.page.scss'],
})
export class EditprofilePage implements OnInit {
  public userdetailsedit: FormGroup;
  responseEdit: any;
  userdetails: any;
  constructor(public loadingController: LoadingController, public modalController: ModalController, 
    public navParams: NavParams, private formBuilder: FormBuilder, private storage: Storage, 
    private imagePicker: ImagePicker, private base64: Base64, public chakapi: ChakapiService, 
    private filePath: FilePath) { 
      this.userdetailsedit = this.formBuilder.group({
        first_name: ['', Validators.required],
        last_name: ['', Validators.required],
        mobile: ['', Validators.compose([
          Validators.maxLength(10),
          Validators.minLength(10),
          Validators.required,
          Validators.pattern('^[0-9]{10}$')
        ])],
        profile_pic: [''],
      });
  }

  ngOnInit() {
  }
  ionViewWillEnter(){
    this.storage.get('USER').then(userde => {
      if (userde) {
        this.userdetails = userde;
        this.userdetailsedit.setValue({
          first_name: this.userdetails.first_name, 
          last_name: this.userdetails.last_name, 
          mobile: this.userdetails.mobile,
          profile_pic: this.userdetails.profile_pic,
        });
      }
    });
  }
  UpdateUserDetails(){
    this.storage.get('USER').then(userde => {
      if (userde) {
        this.userdetails = userde;
        const userdetailseditss = {
          first_name: this.userdetailsedit.value.first_name,
          last_name: this.userdetailsedit.value.last_name,
          mobile: this.userdetailsedit.value.mobile,
          profile_pic: this.userdetailsedit.value.profile_pic,
        };
        this.chakapi.UserProfileUpdate(userdetailseditss, 'userUpdateProfile/' + this.userdetails.id).subscribe((data) => {
        console.log(data);
        }, error => { console.log(error); });
      }
    });
  }
  imageuserchoose(){
    const frmData = new FormData();
    let options = {
      maximumImagesCount: 1
    };
    this.imagePicker.getPictures(options).then((results) => {
      for (var i = 0; i < results.length; i++) {
        let imageupload2 = results[i].replace('file://', '');       
        this.userdetailsedit.patchValue({
          profile_pic: imageupload2,
        });
      }
    }, (err) => { });
  }
}

首先，我在此函数中设置值ionViewWillEnter()，然后打开图像选择器，但问题是它没有在html的<img> tag中设置图像。然后我使用API​​发送详细信息。

非常感谢您的帮助。