서비스에서 호출 할 때 구성 요소가 첫 번째보기에로드되지 않습니다.

Question

서비스에서로드하는 첫 번째 구성 요소를 구현하고 있으며 페이지를 처음로드 할 때 데이터가 표시되지 않지만 작동합니다. 페이지를 완전히 새로 고친 후이 구성 요소를보아야합니다 (공백으로로드). 다른 페이지로 이동하고 데이터를 반환하면 정상적으로로드됩니다. 누군가가 우리가 잘못하고있는 것에 대해 밝힐 수 있습니까? NgModule 구성

다음

가 서비스 구현

import { Injectable, Inject } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { of } from 'rxjs/observable/of'; 

import { Http } from '@angular/http'; 
import { IRegion } from '../components/region.component'; 

@Injectable() 
export class RegionService { 
    private baseServiceUrl: string; 
    private fetchedRegions: IRegion[]; 

    constructor(private http: Http, 
     @Inject('BASE_URL') baseUrl: string) 
    { this.baseServiceUrl = baseUrl } 

    getRegions(): Observable<IRegion[]> { 
     var url = this.baseServiceUrl + 'api/realm/regions'; 

     this.http.get(url).subscribe(result => { 
      this.fetchedRegions = result.json() as IRegion[]; 
      console.log('regions called. count:' + this.fetchedRegions.length); 
     }, error => { 
      console.error(error) 
     }); 

     return of(this.fetchedRegions); 
    } 
} 

우리는 구성 요소가 여기에

<li [routerLinkActive]="['link-active']"> 
    <a [routerLink]="['/regions']"> 
     Regions 
    </a> 
</li> 

입니다 액세스하는 데 사용하는 링크 구성 요소 여기

import { Component, OnInit } from '@angular/core'; 
import { StbBaseComponent } from './StbBaseComponent'; 
import { IRegion } from './region.component'; 
import { RegionService } from '../services/region.service'; 

@Component({ 
    selector: 'region-list', 
    templateUrl: './regionlist.component.html', 
    styleUrls: ['./regionlist.component.less'] 
}) 
export class RegionListComponent extends StbBaseComponent implements OnInit { 
    public regions: IRegion[]; 
    public selectedRegion: IRegion; 

    constructor(private regionService: RegionService) { 
     super(); 
    } 

    ngOnInit() { 
     this.getRegions(); 
    } 

    onSelect(region: IRegion): void { 
     this.selectedRegion = region; 
    } 

    getRegions(): void { 
     this.regionService.getRegions().subscribe(regions => this.regions = regions); 
    } 
} 

입니다입니다

@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     HomeComponent, 
     RegionListComponent 
    ], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'regions', component: RegionListComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ], 
    providers: [RegionService] 
}) 

Answer 1

RRForUI이 코드에 문제가 있는지에 대해 설명했다 HTTP 호출을 해결주의해야

RegionService :

getRegions(): Observable<IRegion[]> { 
    var url = this.baseServiceUrl + 'api/realm/regions'; 
    return this.http.get(url).map((res: Response) => res.json()); 
} 

그리고 구성 요소에

getRegions(): void { 
    this.regionService.getRegions().subscribe(regions => this.regions = regions); 
} 

---

PS : 항상 사용되지 않는 것입니다, 이는 HttpClient 대신 Http의 사용 선호합니다. 코드가 훨씬 간단하게 HttpClient 사용

,

return this.http.get<IRegion[]>(url);

Answer 2

내가 생각하는 것은 입니다. 1) 비동기 작업이고 비어있는 this.fetchedRegions을 반환하는 서비스 호출에 가입하고 있습니다. 따라서 전혀 지연이 없어 페이지가로드 될 때 표시 할 데이터가 없습니다. 2) 다음으로 다른 경로로 이동하여 다시 돌아올 때 this.fetchedRegions가 해결되므로 데이터가 표시됩니다.

지도에서 서비스 구독을 바꾸고 this.fetchedRegions를 반환하지 마십시오. 구성 요소의 서브 스크립 션은 다음과 같은 변경해야

,