javascript - 在 Angular2 中从服务器获取数据后 View 未更新

Question

我使用 Ajax 从 API 获取员工模型，并将其放入员工模型中，但它并没有反射(reflect)在 UI 上，当您单击浏览器 2.3 次后，它会出现在 UI 上。

组件是这样的:

       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();
      }

    }

模板是:

<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>

UI 更新延迟的原因可能是什么？这是因为我要替换模型而不填充吗？

Answer 1

您可以利用 ChangeDetectorRef 类及其 detectChanges 方法:

@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(); // <-------
      }
    });