更改个人用户的图像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);
}