1
SB Admin BS 4 Angular2 프로젝트를 사용하여 응용 프로그램을 만들고 있습니다.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.')
);
}
<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>
달성하려는 목표를 보여주는 코드를 제공해주십시오. 이 정보 부탁 어딘가에 버그가 있다고 확신하지만 더 구체적인 정보를 줄 수있는 방법을 찾지 못했습니다 ;-) –
Gunter, thanks. , 나는 틀린 일을하고 있는지, 무엇을 확신 할 수 없는지 확신합니다. 페이지가 처음에 표시 될 때 catalog.catalogName은 자리 표시 자 텍스트를 표시합니다. 그런 다음 카탈로그 이름 또는 설명 필드를 클릭하면 값이 표시됩니다. 시간 내 줘서 고마워! – Don
일부 디버깅을 할 때 changeDetection : ChangeDetectionStrategy.OnPush가 문제를 일으킨다는 것을 알았습니다 ....이 코드에서 탭의 ng2-bootstrap 구현의 일부로 포함되었습니다 .... – Don