为个人用户更改图像 Angular 5

Question

我有一组用户，我希望能够单独更改与每个用户关联的图像

我已经能够在个人资料用户页面上执行此操作没问题，但我可以弄清楚当我有多个个人资料时该怎么做

<img [src]="member.person.imagePath"
                     (click)="fileInput.click()"
                     class="profile-image pointer img-fluid img-thumbnail">
                          <div style="text-align:center;"
                               class="cam-icon cam-pos"
                               [hidden]="!editing">
                                    <i class="fa fa-camera pointer" (click)="fileInput.click()" aria-hidden="true"></i>
                          </div>
                          <input style="display: none"
                                 type="file"
                                 (change)="changeListener($event)"
                                 #fileInput>



 onFileChanged(event) {
    const string = event.target.files[0]
    this.currentUserData.familyMembers[0].person.imagePath = event.target.files[0];
}

changeListener($event) : void {
    this.readThis($event.target);
}


readThis(inputValue: any): void {
    var file:File = inputValue.files[0];
    var myReader:FileReader = new FileReader();

    myReader.onloadend = (e) => {
        this.currentUserData.familyMembers[0].person.imagePath = myReader.result;
    }
    myReader.readAsDataURL(file);
}

目前我将它设置为以数组的第一个成员为目标，只是为了检查它是否正常工作并且确实如此。我的问题是使用从我的计算机上传的图片定位其他成员

Answer 1

所以不是使用 [0] 作为元素，而是需要用 change 函数传回索引。

所以无论你在哪里做你的 *ngFor 循环，像这样添加索引：

<ng-container *ngFor="let member of members; let i = index;">

    <img [src]="member.person.imagePath"
                 (click)="fileInput.click()"
                 class="profile-image pointer img-fluid img-thumbnail">
                      <div style="text-align:center;"
                           class="cam-icon cam-pos"
                           [hidden]="!editing">
                                <i class="fa fa-camera pointer" (click)="fileInput.click()" aria-hidden="true"></i>
                      </div>
                      <input style="display: none"
                             type="file"
                             (change)="changeListener($event, i)"
                             #fileInput>

</ng-container>

changeListener($event, index: number) : void {
    this.readThis($event.target, index);
}


readThis(inputValue: any, index: number): void {
    var file:File = inputValue.files[0];
    var myReader:FileReader = new FileReader();

    myReader.onloadend = (e) => {
        this.currentUserData.familyMembers[index].person.imagePath = myReader.result;
    }
    myReader.readAsDataURL(file);
}

为个人用户更改图像 Angular 5

Change image for individual users Angular 5

upload

image

typescript

angular5