Array in ngFor not saving

I have a button Add Educational Background that takes me to the awards input form.

<div class="col">
    <button *ngIf="authService.permission('edit_user') || authService.user().employee_number == routes.parent.snapshot.params.employee_number"
    [hidden]="editProfileForm" class="btn btn-primary btn-sm float-right" (click)="isView=false; userEducationBackGround=resetUserEducationBackGround(); isEdit=false; awards=[]">
        Add Educational Background &nbsp;
        <i class="fa fa-plus">
        </i>
    </button>
</div>

Here are my awards input form which is displayed by ngFor.

<div class=" mb-2" *ngIf="awards.length > 0">
    <div class="mb-2" *ngFor="let item of awards; let i = index">
        <div class="row">
            <div class="col-4">
                <div class="form-group mb-0">
                    <label>
                        Input Award Title
                    </label>
                    <input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="item.award"
                    class="form-control">
                </div>
            </div>
            <div class="col-4 m-auto">
                <div class="form-group mb-0">
                    <label>
                        File
                    </label>
                    <input #file type="file" accept='image/*' class="form-control" (change)="onPictureSelected($event.target.files, i)"
                    />
                </div>
            </div>
            <div class="col-4 m-auto">
                <div class="form-group mt-4 mb-0">
                    <button class="btn btn-primary btn-xs" (click)="$event.preventDefault(); saveAward(i);"
                    *ngIf="isEdit">
                        <i class="fa fa-upload">
                        </i>
                    </button>
                    &nbsp;
                    <button class="btn btn-secondary btn-xs" (click)="$event.preventDefault(); removeAward(i); awardsErrorMessage=''">
                        <i class="fa fa-trash">
                        </i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Here's my button on that same page to add multiple awards field.

<div class="row mt-4">
    <div class="form-group ml-2">
        <button class="btn btn-primary btn-sm" (click)="addAward()">
            Awards
            <i class="fa fa-plus">
            </i>
        </button>
    </div>
</div>

Here's the method for addAward

addAward() {
    this.awards.push({
        id: null,
        award: '',
        photo: null
    });
}

Here's what I've done. I added the addAward() to pass on the initial value. This works it saves data the problem is, I'm unable to saves multiple awards and only one gets save.

<div class="col">
    <button *ngIf="authService.permission('edit_user') || authService.user().employee_number == routes.parent.snapshot.params.employee_number"
    [hidden]="editProfileForm" class="btn btn-primary btn-sm float-right" (click)="addAward(); isView=false; userEducationBackGround=resetUserEducationBackGround(); isEdit=false;">
        Add Educational Background &nbsp;
        <i class="fa fa-plus">
        </i>
    </button>
</div>

UPDATE
Here's the save awards method.

saveEducationalAward(id) {
    let counter = 0;
    for (let item of this.awards) {
        counter++;
        let formData = new FormData();
        formData.append('photo', item.photo);
        formData.append('award', item.award);
        this.apiService.postData('users/educational-award/' + id, formData).subscribe(response = >{
            if (this.awards.length === counter) {
                this.finishSave();
            };
        });
    }
    if (this.awards.length === 0) {
        this.finishSave();
    };
}

onPictureSelected(files, index) {
    this.awards[index].photo = files[0];
}

Not sure if this information will suffice to solve this problem. Please let me know.