Image 为个人用户更改图像5

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

我已经能够在个人资料用户页面上做到这一点，没有问题，但我可以在我有多个个人资料时想出如何做到这一点

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

onFileChanged（事件）{
const string=event.target.files[0]
this.currentUserData.familyMembers[0].person.imagePath=event.target.files[0]；
}
changeListener（$event）：无效{
this.readThis（$event.target）；
}
readThis（inputValue:any）：void{
var file:file=inputValue.files[0]；
var myReader:FileReader=newfilereader（）；
myReader.onloadend=（e）=>{
this.currentUserData.familyMembers[0].person.imagePath=myReader.result；
}
myReader.readAsDataURL（文件）；
}

---

目前，我已将其设置为针对阵列的第一个成员，以检查它是否正常工作。我的问题是使用从我的计算机上载的图像瞄准其他成员

，因此不使用[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);
}

changeListener（$event，index:number）：无效{
this.readThis（$event.target，index）；
}
readThis（inputValue:any，index:number）：void{
var file:file=inputValue.files[0]；
var myReader:FileReader=newfilereader（）；
myReader.onloadend=（e）=>{
this.currentUserData.familyMembers[index].person.imagePath=myReader.result；
}
myReader.readAsDataURL（文件）；
}

是，伙计。这么简单的解决办法。谢谢