0

I have an Angular 4 component that retrieves data from a service and then updates a view. When my service retrieves the data and updates the component's property, the property does not update in the UI. I have tried using the NgZone and ChangeDetectionRef to force the update and neither worked. My view is:

<h1> {{ extractedData == false ? 'Enter' : 'Confirm'}} ACH Data</h1>
<form>
  <div class="form-group">
    <label>Account #</label>
    <input type="text" name="accountNum" [(ngModel)]="processedImage.achResponse.accountNumber" class="form-control"/>
  </div>
  <div class="form-group" *ngIf="!extractedData">
    <label>Confirm Account #</label>
    <input type="text" name="confirmAccountNum" [(ngModel)]="confirmAccountNumber" class="form-control" />
  </div>
  <div class="form-group">
    <label>Routing #</label>
    <input type="text" name="routingNum" [(ngModel)]="processedImage.achResponse.routingNumber" class="form-control" />
  </div>

  <button type="button" class="btn btn-lg btn-primary" style="border-radius: 0; margin: 1em; width: 90%">Submit</button>
</form>

And my Component is:

import { Component, OnInit, NgZone, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Logger } from 'angular2-logger/core';

import { ProcessedImage } from '../../core/models/ProcessedImage';


import { ProcessedImageService } from '../../core/services/processedImage.service';


@Component({
  templateUrl: './payment-data.component.html',
  styleUrls: ['./payment-data.component.css']
})
export class PaymentDataComponent {

  public extractedData: boolean;
  public processedImage : ProcessedImage;
  public confirmAccountNumber: string;
  public headerText: string;

  constructor(private _route: ActivatedRoute,
              private _imgSvc: ProcessedImageService,
              private _log: Logger,
              private _cdRef: ChangeDetectorRef,
              private _zone: NgZone)
  {
    this.extractedData = false;
    this._log.info("initializing PaymentData component");

    this.processedImage = new ProcessedImage();
    this.confirmAccountNumber = "";


    this._route.paramMap.subscribe((m) => {
      let trx = m.get("transactionId");
      if (trx != null) {
        let img = this._imgSvc.get(trx);

        this._log.info("Image Received from svc", img);

        if (img != null) {
            this._log.info("Image is not null, updating stuff.");
            this.extractedData = true;
          this.processedImage = img;
        }

      }
    });
  }

  public getHeader() {
    return this.extractedData ? "Confirm" : "Enter";
  }

}

And this is what the output looks like.

enter image description here

Something is obviously broken because event the H1 static content does not show up. The expected result is that the fields should have string values in them and the title should say Confirm ACH Data. This is what the page looks like when I refresh (the _imgSvc wouldn't be able to find the transaction so "extracted" would be false). This leads me to believe it is something to do with routing, but the log entries all indicate that the constructor pieces are being called properly and returning the right data when the router brings you to this page. This is a child route as well, if that makes a difference.

enter image description here

Mike
  • 1,718
  • 3
  • 30
  • 58
  • Are there any errors displaying in the console? – DeborahK Aug 31 '17 at 23:10
  • There are no errors in the console, and RouterEvent: NavigationEnd gets logged out – Mike Aug 31 '17 at 23:11
  • Does `paramMap` have a subscribe method? Try changing this: `this._route.paramMap.subscribe` to this `this._route.params.subscribe`. – DeborahK Aug 31 '17 at 23:16
  • same result with params instead of paramMap – Mike Aug 31 '17 at 23:28
  • Any way you can build a plunker that demonstrates your issue? – DeborahK Aug 31 '17 at 23:36
  • sure I will put one together – Mike Aug 31 '17 at 23:37
  • Thanks @DeborahK, turns out it was a js library that was called on the page previous that preventing it from working properly. I am going to step through that and see what the problem is, but it isn't an issue with angular routing. – Mike Sep 01 '17 at 00:02
  • just confirm, ProcessedImageService is an observable service ??? or share the code for get method of this service, seems it is observable and you have not subscribe for it. – Ali Adravi Sep 01 '17 at 08:30

0 Answers0