Wysyłanie żądania do http JSON

0

Moj component.ts


import { Component, OnInit } from '@angular/core';
import { ProgrammeService } from '../programme.service';
import { Time } from '@angular/common';


@Component({
  selector: 'app-repertuar',
  templateUrl: './repertuar.component.html',
  styleUrls: ['./repertuar.component.css']
})
export class RepertuarComponent implements OnInit {

   filmy: CinemaProgramme[];
   film: ProgrammeItems[];


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


  constructor(private programmeService: ProgrammeService) { }

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

export interface Programme {
  id: number;
  name: string;
  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

import { Injectable } from '@angular/core';
import { of, Observable } from 'rxjs';
import { Programme, ProgrammeItems, CinemaProgramme } from './repertuar/repertuar.component';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})


export class ProgrammeService {
  private url = 'http://localhost:8080/programme/getAll';

  getCinemaProgramme(): Observable<CinemaProgramme[]> {
    return this.http.get<CinemaProgramme[]>(this.url);
  }

  constructor(private http: HttpClient) { }
}

HTML

<p>repertuar works!</p>
<div *ngFor="let film of filmy " style="width: 130%; margin-left:70px ;">
<div class="one-repertuar">
  <h1>{{ film.id }}</h1>
  <span *ngFor="let fil of film" style="color:white;">
    <h1>{{ fil.movie.description }}</h1>
  </span>

Pragne dodać iż interfaces sa dobrze odwzorowane z JSONA ,tylko nwm w czym jest problem co mam zle w kodzie ogolnie w html pierwsze h1 wyswietla mi 7 obietków (1 do 7, bo tyle ogolnie jest) ale przy drugim h1 wyskakuje mi błąd w consolce

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

0

Po pierwsze, <h1> może być tylko 1 na stronie. Poczytaj sobie o zastosowaniu nagłówków.

Po drugie, nie znam angulara, ale jak dla mnie komunikat błędu jest bardzo wymowny. Prawdopodobnie drugi element z tablicy filmy nie jest tablicą. Pierwszy jest, więc jest ok. Ale przy drugim się sypnie. Wyświetl sobie zawartość tej tablicy. Pewnie zamiast drugiej tablicy masz tam obiekt.

1 użytkowników online, w tym zalogowanych: 0, gości: 1