Btukfyl

I have a array of users and i wish to be able to change the image associated with each individually

I have been able to do this on the profile users page no problem but can figure out how to do it when i have multiple profiles

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

}

currently i have it set to target the first member of the array just to check it was working and it does. my problem is targeting other members with a image uploaded from my computer

So instead of using [0] as the element, you need to pass the index back with the change function.

So wherever you do your *ngFor loop, add index like so:

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

}