ng2-file-upload is not working correctly for one component but is for another

Question

I am using ng2-file-upload for 2 different components but essentially the same code. I copy and pasted the component code that is working to the component code that is not. The issue is after I upload a file, nothing happens. I have to click upload several times before the uploader actually recognizes a file was uploaded. In the other component, it works perfectly.

Here is my component.ts code for the working file

import {Component, DoCheck, OnInit} from '@angular/core';
import {UiService} from "../../ui.service";
import {Transaction} from "../transaction.model";
import {TransactionService} from "../transaction.service";
import {FileUploader} from "ng2-file-upload";
import {UploadService} from "../../settings/account-settings/contracts/upload-service";
import {Router} from "@angular/router";

@Component({
  selector: 'app-owner-post-eval',
  template: `
    <div class="modal is-active" [ngStyle]="styleObject('ownerPost')">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Post Evaluation</p>
        </header>
        <section class="modal-card-body">
          <form *ngIf="!uploaderLoading">
            <label class="label">Post Evaluation</label>
            <textarea class="textarea"
                      [(ngModel)]="ownerPostEval"
                      placeholder="Please leave a review of your items current state."
                      name="ownerPostEval"></textarea>
          </form>
          <div class="field image-upload" *ngIf="uploader?.queue?.length < 1" style="margin-top: 25px; text-align: center">
            <label for="file-input" style="justify-content: center">
              <img src="../../../assets/plus.png" alt="Add Photo" class="image is-32x32" style="margin: auto"> Add Image
            </label>
            <input class="file-input" id="file-input" type="file" name="photo" ng2FileSelect [uploader]="uploader">
          </div>
          <div class="spinner" *ngIf="uploaderLoading"></div>
          <div class="content" style="color: #fdfdfd; font-size: 20px; text-align: center" *ngIf="!uploaderLoading">
            <span *ngIf="uploader?.queue?.length < 1" style="color: #111">No images uploaded</span>
            <span *ngFor="let item of uploader.queue" style="color: #111">{{item?.file?.name}}</span>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button class="button is-success" (click)="onUploadClicked()">Save</button>
          <button class="button" (click)="onCloseModal()">Cancel</button>
        </footer>
      </div>
    </div>
  `,
  styleUrls: ['../transaction.component.css']
})
export class OwnerPostEvalComponent implements OnInit, DoCheck {
  ownerPostEvalActive = false;
  ownerPostEval: string;
  transaction: Transaction;
  file: any;
  uploaderLoading = false;
  devUrl = 'XXXXXX';
  url = 'XXXXX';
  public uploader:FileUploader = new FileUploader({url: this.devUrl, itemAlias: 'photo'});

  constructor(
    private router: Router,
    private uploadS: UploadService,
    private tranS: TransactionService,
    private uis: UiService) {}

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file)=> { file.withCredentials = false; };

    this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
      let awsUrl = 'XXXXX' + response;
      this.onUpdateTransaction(awsUrl);
    };
  }

  ngDoCheck() {
    this.ownerPostEvalActive = this.uis.onReturnEval('ownerPost');
  }

  // pre eval
  onUpdateTransaction(fileName: string) {
    this.transaction = this.tranS.onReturnTransactionService();
    this.transaction.ownerPostReview = this.ownerPostEval;
    this.transaction.ownerPostFilled = true;
    this.transaction.ownerPostImages.push(fileName);
    this.tranS.onUpdateTransaction(this.transaction.id, this.transaction)
      .subscribe(update => {
        console.log(update);
        this.uploaderLoading = false;
        this.router.navigate(['/profile']);
        this.uis.onFlash('Post Evaluation Posted Successfully', 'success');
        this.onCloseModal();
      }, resp => {
        console.log(resp);
        this.uis.onFlash('Error Posting Post Evaluation', 'error');
      })
  }

  onUploadClicked() {
    this.uploader.uploadAll();
    this.uploaderLoading = true;
  }

  // UI

  styleObject(s: string): Object {
    if (s === 'ownerPost') {
      if (this.ownerPostEvalActive) {
        return {'height': '100%'};
      } else {
        return {'height': 0};
      }
    }
  }

  onCloseModal(){
    this.uis.onCloseModal('ownerPost');
  }



}

and here is the code for the component that is not working

import {Component, DoCheck, OnInit} from '@angular/core';
import {UiService} from "../../ui.service";
import {Transaction} from "../transaction.model";
import {TransactionService} from "../transaction.service";
import {FileUploader} from "ng2-file-upload";
import {UploadService} from "../../settings/account-settings/contracts/upload-service";
import {Router} from "@angular/router";

@Component({
  selector: 'app-renter-post-eval',
  template: `
    <div class="modal is-active" [ngStyle]="styleObject('renterPost')">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Post Evaluation</p>
        </header>
        <section class="modal-card-body">
          <form *ngIf="!uploaderLoading">
            <label class="label">Post Evaluation</label>
            <textarea class="textarea"
                      [(ngModel)]="renterPostEval"
                      placeholder="Please leave a review of your items current state."
                      name="renterPostEval"></textarea>
          </form>
          <div class="field image-upload" *ngIf="uploader?.queue?.length < 1" style="margin-top: 25px; text-align: center">
            <label for="file-input" style="justify-content: center">
              <img src="../../../assets/plus.png" alt="Add Photo" class="image is-32x32" style="margin: auto"> Add Image
            </label>
            <input class="file-input" id="file-input" type="file" name="photo" ng2FileSelect [uploader]="uploader">
          </div>
          <div class="spinner" *ngIf="uploaderLoading"></div>
          <div class="content" style="color: #fdfdfd; font-size: 20px; text-align: center" *ngIf="!uploaderLoading">
            <span *ngIf="uploader?.queue?.length < 1" style="color: #111">No images uploaded</span>
            <span *ngFor="let item of uploader.queue" style="color: #111">{{item?.file?.name}}</span>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button class="button is-success" (click)="onUploadClicked()">Save</button>
          <button class="button" (click)="onCloseModal()">Cancel</button>
        </footer>
      </div>
    </div>
  `,
  styleUrls: ['../transaction.component.css']
})
export class RenterPostEvalComponent implements OnInit, DoCheck {
  renterPostEvalActive = false;
  renterPostEval: string;
  transaction: Transaction;
  file: any;
  uploaderLoading = false;
  devUrl = 'XXXXX';
  url = 'XXXXX';
  public uploader:FileUploader = new FileUploader({url: this.devUrl, itemAlias: 'photo'});

  constructor(
    private router: Router,
    private uploadS: UploadService,
    private tranS: TransactionService,
    private uis: UiService) {}

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file)=> { console.log(file); file.withCredentials = false; };

    this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
      let awsUrl = 'XXXX' + response;
      this.onUpdateTransaction(awsUrl);
    };
  }

  ngDoCheck() {
    this.renterPostEvalActive = this.uis.onReturnEval('renterPost');
  }

  // pre eval
  onUpdateTransaction(fileName: string) {
    this.transaction = this.tranS.onReturnTransactionService();
    this.transaction.renterPostReview = this.renterPostEval;
    this.transaction.renterPostFilled = true;
    this.transaction.renterPostImages.push(fileName);
    this.tranS.onUpdateTransaction(this.transaction.id, this.transaction)
      .subscribe(update => {
        console.log(update);
        this.uploaderLoading = false;
        this.router.navigate(['/profile']);
        this.uis.onFlash('Post Evaluation Posted Successfully', 'success');
        this.onCloseModal();
      }, resp => {
        console.log(resp);
        this.uis.onFlash('Error Posting Post Evaluation', 'error');
      })
  }

  onUploadClicked() {
    this.uploader.uploadAll();
    this.uploaderLoading = true;
  }

  // UI

  styleObject(s: string): Object {
    if (s === 'renterPost') {
      if (this.renterPostEvalActive) {
        return {'height': '100%'};
      } else {
        return {'height': 0};
      }
    }
  }

  onCloseModal(){
    this.uis.onCloseModal('renterPost');
  }



}

A note about these files, they both are used at the same time because they are modals. Here is the file they are called in as directives.

<!-- evaluation modals -->
<app-owner-post-eval></app-owner-post-eval>
<app-renter-post-eval></app-renter-post-eval>
<app-report-issue></app-report-issue>
<app-message-modal></app-message-modal>


<!-- Main container -->
<nav class="level">
  <!-- Left side -->
  <div class="level-item">
    <h3 class="title">Transaction</h3>
  </div>
</nav>

I've tried looking at the code and spotting any differences but it is not working. Can anyone help?