Угловой вложенный компонент не отображается с помощью ngIf

Я просто пытаюсь вложить компонент внутрь компонента и передать массив как ngFor вложенного компонента. Проблема в том, что массив взят из наблюдаемого, и для вложенного компонента ничего не отображается. Я вижу наблюдаемый возврат в консоли браузера, поэтому я знаю, что все работает до точки рендеринга вложенного компонента. Я знаю, что это как-то связано с рендерингом, происходящим до наблюдаемых возвращаемых данных, но я не смог найти документацию или онлайн-информацию (или вопросы ТАК), которые указали бы мне на то, что мне не хватает.

Вот код..

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;
  }
}

приложение.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>

Любые советы высоко ценится!


javascript angular angular-template
person Emo333    schedule 05.11.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Удалите подписку из сервиса и используйте async Pipe внутри вашего 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>
person Fateh Mohamed    schedule 05.11.2017
comment
Попробовал это и все еще не отображает компонент (или {{недели}}). - person Emo333; 05.11.2017

arrow_upward
0
arrow_downward

Не подписывайтесь на Observable в службе, попробуйте подписаться на него в компонентах ngOnInit и назначьте ответ в «this.weeks». Надеюсь, это поможет.

Недели отладки, например "{{weeks | json}}". Там вы должны увидеть весь объект, иначе вы увидите «[object Object]».

Если это не работает, пожалуйста, поделитесь им через stackblitz, я могу исправить это для вас

person Danish Arora    schedule 18.05.2019