我正在使用SB Admin BS 4 Angular2项目创建应用程序。
我有一个页面不显示服务调用的数据。但是，当我单击其中一个输入字段时，将显示数据。来自服务的调用很好，数据位于用于在页面上显示的对象中。
对于为什么页面的初始视图不显示模型和列表的任何见解表示赞赏。
感谢
以下是代码段。
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.')
);
}
以下是HTML模板的片段
<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>
答案 0 :(得分：0)
添加markForCheck（）;在每个方法中data =＆gt; {..... this.cd.markForCheck（）; .....}解决了这个问题。需要导入ChangeDetectorRef .... -