Изменить изображение для отдельных пользователей 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] в качестве элемента, вам нужно передать индекс обратно с помощью функции изменения.

Поэтому, где бы вы ни выполняли цикл * 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);
}