Angular嵌套组件未使用ngIf渲染

Question

I am simply trying to nest a component inside a component and pass an array as the ngFor of the nested component. The issue is the array is from an observable and nothing is rendering for the nested component. I can see the observable returning in the browser console so I know everything is working up to the point of the nested component render. I know it has something to do with the render occurring before the observable returning data but I have not been able to find documentation or online information (or SO questions) that have pointed me to what I am missing.

Here is the code..

srv-data.service.ts:

 interface IWeek { id: number; weeknumofyear: number; year: number; holidaymontype: number; holidaytuetype: number; holidaywedtype: number; holidaythutype: number; holidayfritype: number; } @Injectable() export class SrvDataService { errorMessage: any; private _apiUrl = 'http://172.16.194.250:99/api/'; weeks$: Observable<IWeek[]>; weeks: IWeek[] = []; constructor(private _http: HttpClient) { this.getWeeks() .subscribe(weeks$ => this.weeks = weeks$, error => this.errorMessage = <any>error); } getWeeks(): Observable<IWeek[]> { return this._http.get<IWeek[]>(this._apiUrl + 'Weeks') .do(data => console.log('Weeks from getWeeks(): ' + JSON.stringify(data))) .catch(this.handleError); } } 

app.component.ts:

 import { Component, OnInit } from '@angular/core'; import { SrvDataService } from './services/srv-data.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { weeks: IWeek[] = []; constructor (public dataService: SrvDataService) { this.weeks = this.dataService.weeks; } } 

app.component.html:

 <div> In app.component {{ weeks }} <app-week *ngFor="let week of weeks; index as i; first as isFirst" [week]="week"></app-week> </div> 

Any advice is greatly appreciated!

Answer 1

Delete subscribe from the service and use async Pipe inside your app.component.html:

<div>
  In app.component {{ weeks }}
  <app-week *ngFor="let week of weeks | async; index as i; first as isFirst"
            [week]="week">
  </app-week>
</div>

Answer 2

Don't Subscribe the Observable in Service, Try Subscribing it in Components ngOnInit and assign the response in "this.weeks". Hope That will help.

Debug weeks like "{{weeks | json}}". There you should see whole object else you will see "[object Object]".

If that Doesnot work, Please share it over stackblitz, i can fix it for you