View is not updating after getting data from server in Angular2

Question

I am getting employee model from API using Ajax and putting that into Employee Model But it's not reflecting on UI same, after you click on Browser 2,3 times it appears on UI.

Component is this:

       import { Component, AfterViewInit, OnInit} from '@angular/core';
    import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common';
    import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_DIRECTIVES, RouteParams} from '@angular/router-deprecated';
    import * as moment from 'moment';
    var Chart = require('../../node_modules/chart.js/dist/Chart.bundle.min');
    var $ = require('../../node_modules/jquery/dist/jquery.min');
    var jqui = require('../../node_modules/jquery-ui/datepicker');

    import {DATEPICKER_DIRECTIVES, BUTTON_DIRECTIVES} from 'ng2-bootstrap';
    import {employeeFactory} from '../../factory/employeeFactory';


    @Component({
      selector: 'loan_application',
      templateUrl: './app/loan_application/loan_application.html',
      directives: [RouterLink, RouterOutlet, ROUTER_DIRECTIVES, DATEPICKER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES],
      providers: [employeeFactory]
    })
    export class LoanApplicationComponent implements AfterViewInit, OnInit {
      public progress: number;
      private employee: any;
      public constructor(private _router: Router, private routeParam: RouteParams, private _employeeFactory: employeeFactory) {
        this.progress = 1;
        this.progress = this.routeParam.params['state'] ? parseInt(this.routeParam.params['state'].match(/\d+/)[0]) : null;
        this.employee = null;
        this.loading = false;

 ngAfterViewInit() {
        this.charElem = $('#loanChart');
        // this.drawChart(true);

        $(function () {
          $('.txtDate').datepicker({
            showOn: 'both',
            buttonText: '<i class="fa fa-calendar" style="font-size:33px;"></i>',
          });
        });
      }

  private getEmployeeProfile() {
        this._employeeFactory.getEmployeeProfile((profile) => {
          if (profile.entity) {
            this.employee = profile.entity;
            console.log('employee', this.employee)

            this.requestloan.customerId = profile.entity.customerId
          }
        }, (err) => {
          if (err.status == 401) {
            this._router.navigate(['OTPEpmloyeeComponent']);
          }
        });
      }
      ngOnInit() {
        this.getEmployeeProfile();
        this.getBankDetails();
      }

    }

and template is :

<div [class]="selectedSection(1)" id="step-1">
                <div class="row padding-top-bottom-15">

                    <div class="col-lg-1 col-md-2">
                        <label class="control-label" for="title">Title <span class="required">*</span></label>
                        <input id="title" required="required" [(ngModel)]='employee.title' class="form-control" type="text">
                    </div>
                    <div class="col-lg-5 col-md-4">
                        <label class="control-label" for="first-name">First Name <span class="required">*</span></label>
                        <input id="first-name" required="required" [(ngModel)]='employee.firstName' class="form-control" type="text">
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <label class="control-label" for="middle-name">Middle Name <span class="required"></span></label>
                        <input id="middle-name" required="required" [(ngModel)]='employee.middleName' class="form-control" type="text">
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <label class="control-label" for="last-name">Last Name <span class="required">*</span></label>
                        <input id="last-name" required="required" [(ngModel)]='employee.lastName' class="form-control" type="text">
                    </div>
                </div>
                <div class="row padding-top-bottom-15">
                    <div class="col-lg-6 col-md-6">
                        <label class="control-label" for="first-name">Mobile Number <span class="required">*</span></label>
                        <input id="first-name" required="required" [(ngModel)]='employee.mobNumber' class="form-control col-md-7 col-xs-12" type="text">
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <label class="control-label" for="gender">Gender <span class="required">*</span></label><br/>
                        <div class="btn-group" id="gender">
                            <label class="btn {{gender==='Female'?'btn-success':'btn-default'}}" [(ngModel)]='employee.gender' btnRadio="Female" uncheckable>Female</label>
                            <label class="btn {{gender==='Male'?'btn-success':'btn-default'}}" [(ngModel)]='employee.gender' btnRadio="Male" uncheckable>Male</label>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="row padding-top-bottom-15">
                            <div class="col-lg-12">
                                <label class="control-label" for="email-id">Email Id<span class="required">*</span></label>
                                <input type="text" [(ngModel)]='employee.email' id="email-id" class="form-control col-md-7 col-xs-12 tDate" />
                            </div>
                        </div>
                        <div class="row padding-top-bottom-15">
                            <div class="col-lg-12">
                                <label class="control-label" for="DOB"> DOB <span class="required">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-btn dob-container">
                                        <input type="text" (change)="checkdate()" [(ngModel)]='employee.dob' id="DOB" class="form-control col-md-7 col-xs-12 txtDate" />
                                    </span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="row padding-top-bottom-15">
                            <div class="col-lg-12">
                                <label class="control-label" for="home-address"> Home Address <span class="required">*</span></label>
                                <textarea name="home-address" [(ngModel)]='employee.homeAddress' id="home-address" cols="30" rows="5" class="form-control col-md-7 col-xs-12"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

What could be the reason delay in UI updation ? Is this because I am replacing Model and not populating ?

Thierry Templier · Accepted Answer · 2016-07-06 19:35:49Z

1

You could leverage the ChangeDetectorRef class and its detectChanges method:

@Component({
  (...)
})
export class LoanApplicationComponent implements AfterViewInit, OnInit {
  constructor(private cdr:ChangeDetectorRef, ...) { // <-------
    (...)
  }

  private getEmployeeProfile() {
    this._employeeFactory.getEmployeeProfile((profile) => {
      if (profile.entity) {
        this.employee = profile.entity;
        console.log('employee', this.employee)

        this.requestloan.customerId = profile.entity.customerId
        this.cdr.detectChanges(); // <-------
      }
    });

answered Jul 6, 2016 at 19:35

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

View is not updating after getting data from server in Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related