Angular2 Initial Page Render not displaying data

Question

I am creating an application using the SB Admin BS 4 Angular2 project.

I have one page that does not display the data from the service calls. However, when I click on one of the input fields, the data displays. The calls from the services are fine and data is in the objects used to display on the page.

Any insight as to why the initial view of the page does not display the model and list is appreciated.

THanks

Here is a code snippet.

import {Component, OnInit, ChangeDetectionStrategy, Pipe} from '@angular/core';
import {Router, RouteSegment} from '@angular/router';
//import {Observable} from 'rxjs/Observable';
import { PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import { ROUTER_DIRECTIVES} from '@angular/router';
import { TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {FORM_DIRECTIVES} from '@angular/common';
import {CatalogService} from '../../../services/catalog-service';
import {CategoryService} from '../../../services/category-service';
import {ProductCatalogService} from '../../../services/product-catalog-service';
import {ProductCategoryService} from '../../../services/product-category-service';
import {Catalog} from '../../../models/catalog-model';
import {Category} from '../../../models/category-model';
import {ProductCatalog} from '../../../models/product-catalog-model';
import {Page} from '../../../shared/page';

@Component({
  selector: 'catalog-detail-component',
  directives: [PAGINATION_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES, TAB_DIRECTIVES],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [CatalogService, ProductCatalogService, CategoryService, ProductCategoryService],
  templateUrl: './pages/catalog-detail/components/catalog-detail.html'
})

export class CatalogDetailComponent implements OnInit {
  public level:number;
  public paramsSub:any;
  public catalog:Catalog = new Catalog();
  public catalogId:number;
  public productTabActive:boolean = true;
  public categories:Array<Category> = [];
  public productCatalogs:Array<ProductCatalog> = [];
  public productsPage:Page;
  public productsTotalItems:number;
  public productsCurrentPage: number;
  public productsMaxSize:number;
  public productsNumPages:number;
  public categoriesPage:Page;
  public categoriesTotalItems:number;
  public categoriesCurrentPage: number;
  public categoriesMaxSize:number;
  public categoriesNumPages:number;
  public page:Page;
  public bigTotalItems:number;
  public bigCurrentPage: number;
  public maxSize:number;
  public numPages:number;
  public data:any;
  public complete:boolean;
  constructor(private _router: Router,
              private routeSegment: RouteSegment,
              private catalogService: CatalogService,
              private productCatalogService: ProductCatalogService,
              private productCategoryService: ProductCategoryService,
              private categoryService: CategoryService) {
    this.productsPage = new Page();
    this.productsPage.number = 0;
    this.productsPage.totalElements = 0;
    this.productsPage.size = 20;
    this.productsPage.totalPages = 0;
    this.productsMaxSize = 20;
    this.categoriesPage = new Page();
    this.categoriesPage.number = 0;
    this.categoriesPage.totalElements = 0;
    this.categoriesPage.size = 20;
    this.categoriesPage.totalPages = 0;
    this.categoriesMaxSize = 20;
  }
  ngOnInit() {
    this.catalogId = +this.routeSegment.getParam('catalogId');
    // Get the Catalog
    this.catalogService.find(this.catalogId).subscribe(
      data => {
        // delete the _links from the response
        delete data['_links'];
        // Set the catalogs Array
        this.catalog = data;
      },
      error => console.log('Could not find catalog.')
    );
    // Get the Product Catalogs
    this.productCatalogService.findByCatalogId(this.catalogId).subscribe(
      data => {
        // delete the _links from the response
        delete data['_links'];
        // Set the catalogs Array
        this.productCatalogs = data['_embedded'].productCatalogs;
        this.paramsSub = 1;
        // Set the Page Object
        this.productsPage = data['page'];
        this.productsPage.totalElements = this.page['totalElements'];
        this.productsCurrentPage = this.page['number'];
        if ( this.productsCurrentPage === 0) {
          this.productsCurrentPage = 1;
        }
        //this.numPages = this.page['totalPages'];
        this.productsMaxSize = 10;
      },
      error => console.log('Could not find catalog.')
    );
    // Get the Catalogs
    this.categoryService.findByCatalogId(this.catalogId).subscribe(
      data => {
        // delete the _links from the response
        delete data['_links'];
        // Set the catalogs Array
        this.categories = data['_embedded'].categories;
        this.paramsSub = 1;
        // Set the Page Object
        this.page = data['page'];
        this.categoriesPage.totalElements = this.page['totalElements'];
        this.categoriesCurrentPage = this.page['number'];
        if ( this.categoriesCurrentPage === 0) {
          this.categoriesCurrentPage = 1;
        }
        //this.numPages = this.page['totalPages'];
        this.categoriesMaxSize = 10;
      },
      error => console.log('Could not find catalog.')
    );
  }

Here is a snippet of the HTML template

<div class="col-xl-6 col-lg-12">
      <h2>Catalog Detail</h2>
      <div class="table-responsive">
        <form #catalogDetailForm="ngForm" (ngSubmit)="onSubmit()">
          <div class="form-group row col-lg-12">
            <label for="catalogId" class="col-sm-2 form-control-label">Catalog Id:</label>
            <div class="col-sm-10">
              <input type="number" [(ngModel)]="catalog.catalogId" name="catalog.catalogId" class="form-control" id="catalogId" placeholder="Catalog Id" value="catalog.catalogId">
            </div>
          </div>
          <div class="form-group row col-lg-12">
              <label for="webCatalogId" class="col-sm-2 form-control-label">Web Catalog Id:</label>
              <div class="col-sm-10">
                <input type="number" [(ngModel)]="catalog.webCatalogId" class="form-control" id="webCatalogId" placeholder="Web Catalog Id" value="catalog.webCatalogId">
              </div>
          </div>
          <div class="form-group row col-lg-12">
            <label for="catalogName" class="col-sm-2 form-control-label">Catalog Name:</label>
            <div class="col-sm-10">
              <input type="text" [(ngModel)]="catalog.catalogName" class="form-control" id="catalogName" placeholder="Catalog Name" value="catalog.catalogName">
            </div>
          </div>
          <div class="form-group row col-lg-12">
            <label for="catalogDescription" class="col-sm-2 form-control-label">Catalog Description:</label>
            <div class="col-sm-10">
              <input type="text" [(ngModel)]="catalog.catalogDescription" class="form-control" id="catalogDescription" placeholder="Catalog Description" value="catalog.catalogDescription">
            </div>
          </div>
          <div class="form-group row col-lg-12">
            <label for="effectiveDate" class="col-sm-2 form-control-label">Effective Date:</label>
            <div class="col-sm-10">
              <input type="date" [(ngModel)]="catalog.effectiveDate" class="form-control" id="effectiveDate" placeholder="Effective Date" value="catalog.effectiveDate">
            </div>
          </div>
          <div class="form-group row col-lg-12">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary pull-right">Save</button>
            </div>
          </div>
        </form>
      </div>

Answer 1

Adding markForCheck(); in each of the methods data => { ..... this.cd.markForCheck(); .....} resolved the issue. Needed to import ChangeDetectorRef as well.... –