Angular , problem w consoli ,Połączenia HTTP , użycie ngFOR

Witam problem tkwi w tym że w konsoli dostaje error , a także w danym html mam wykryty błąd ,jednakże gdy wchodze na strone to widze swój zamierzony cel ? Ktoś mógłby mi pomóc i wytłumaczyć czemu tak się dzieje ?

html

<div class="repertuar">
 <hr style="border:1px dashed white; margin-bottom:50px;">
  <div  style="margin-left:12px;">
   <div *ngFor="let film of repertuar.programmeItems" >   // Tutaj mam podkreślenie dla ngFora
     <div class="one-repertuar" >
       <span style="display:block; margin:3px; margin-top:10px;"><strong style="color:#e1cc89;">{{ film.movie.title }}</strong></span>
       <span style="display:block; margin:3px; margin-top:20px; ">{{ film.movie.description }}</span>

       <span style="display:block; margin:3px; margin-top:110px; margin-left:-120px;">Czas:{{ film.movie.length }}</span>
       <span style="display:block; margin:3px; margin-top:10px;">Reżyseria: {{ film.movie.director }}</span>
    </div>
   </div>
  </div>

</div>

TS

   film: ProgrammeItems[];
   repertuar: CinemaProgramme[];
   kina: Cinema[];

  getCinemaProgramme(): void {
    this.programmeService.getCinemaProgramme().
    subscribe(repertuar => this.repertuar = repertuar);
  }

  getCinema(): void {
    this.programmeService.getCinema().
    subscribe(kina => this.kina = kina);
  }

  constructor(private programmeService: ProgrammeService) { }

  ngOnInit() {
    this.getCinemaProgramme();
    this.getCinema();
  }
}

export interface Cinema {
  id: number;
  cinemaProgramme: CinemaProgramme;
 }

export interface CinemaProgramme {
  id: number;
  programmeItems: Array<ProgrammeItems> ;
}

export interface ProgrammeItems {
  movie: Movie;
  hours: Date[];
 }

export interface Movie {
   id?: number;
   title?: string;
   director?: string;
   length?: Time;
   description?: string;
 }

Service

  getCinemaPrograme(): Observable<CinemaProgramme[]> {
    return this.http.get<CinemaProgramme[]>(this.url + '/getAll');
  }

  getCinemaProgramme(): Observable<CinemaProgramme[]> {
    return this.http.get<CinemaProgramme[]>('http://localhost:8080/programme/get/6');
  }


  getCinema(): Observable<Cinema[]> {
    return this.http.get<Cinema[]>('http://localhost:8080/cinema/getAll');
  }


  constructor(private http: HttpClient) { }

Błąd z kolei to "ERROR TypeError: Cannot read property 'programmeItems' of undefined" oczywiście rozumiem ten błąd ale to nie równa się z tym co otrzymałem na stronie ...

Dodaj ? <div *ngFor="let film of repertuar?.programmeItems">

lub

<div *ngIf="repertuar" *ngFor="let film of repertuar.programmeItems">

lub zainicjalizuj repertuar w pliku ts tj. repertuar: CinemaProgramme[] = [];

lookacode1 napisał(a):

Dodaj ? <div *ngFor="let film of repertuar?.programmeItems">

lub

<div *ngIf="repertuar" *ngFor="let film of repertuar.programmeItems">

lub zainicjalizuj repertuar w pliku ts tj. repertuar: CinemaProgramme[] = [];

O dzięki pomogło ! :)
A wiesz może jak zrobić aby po wyborze w selekcie zaleznie od wyboru pojawiał się w divie jego pod properties itd ? :/

<div>
 <select size="none">
   <option *ngFor="let kino of kina">{{ kino.name }}</option>
 </select>
 <div *ngFor="let kin of kina.cinemaProgramme.programmeItems">
   {{ kin.movie.title }}
   {{ kin.movie.description }}
   {{ kin.movie.length }}
   {{ kin.movie.director }}

 </div>

</div>

Chyba powinno być <div *ngFor="let kin of kino.cinemaProgramme.programmeItems"> ...