ngFor not displaying input field html

i have a task that i need to display the input fields instead of having to go through clicking Awards button which i will remove.

Here's the input fields:

<div class=" mb-2">
    <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">
                    <input type="text" [ngModelOptions]="{standalone: true}" placeholder="Input Award Title"
                    class="form-control">
                </div>
            </div>
            <div class="col-4 m-auto">
                <div class="form-group mb-0">
                    <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 mb-0 ">
                    <button class="btn btn-primary btn-xs" (click)="$event.preventDefault(); saveAward(i);">
                        <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-times">
                        </i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Here's the awards button

<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 add awards button method:

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

Here's is the method to save photo and awards data

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

    removeAward(index) {
        this.awards.splice(index, 1)
    }

UPDATE
Here's the awards array initially it has empty value

awards:IUserEducationalAward[] = [];

This code already works. All im trying to do is show the input fields.

I'm still trying to figure out Angular, so far it has been rough. Im getting the data of awards. But it doesn't seem to display the html fields.

Tried also to remove the *ngIf but it doesn't seem related.