我使用Ajax从API获取员工模型并将其放入员工模型但是它没有反映在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更新延迟的原因是什么? 这是因为我正在替换模型而不是填充吗?
答案 0 :(得分: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(); // <-------
}
});