Angular - znacznik selection a zadania http , Jak zrobić by w zależności od wyboru pokazywały się inne dane

Question

Witam chciałbym żeby po zmianie option w selection zmieniły mi się dane pobierane z JSONA

Component HTML

<div>
 <select name="cos">
   <option selected="selected" >Wybierz kino</option>
   <option *ngFor="let kino of kina  "[value]="kino.id">{{ kino.name }} | {{ kino.id }}</option>
 </select>
 <div  *ngFor="let kin of kina.cinemaProgramme.programmeItems" style="color:white;">
    {{ kin.movie.title }}
 </div>

</div>

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 {

   film: CinemaProgramme[];
   repertuar: CinemaProgramme[];
   kina: Cinema[];
   programy: Array<ProgrammeItems> = [];


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

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

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

  getCinemaPrograme(): void {
    this.programmeService.getCinemaPrograme().
    subscribe(film => this.film = film);
  }

  getRepertuar(): void {
    this.programmeService.getRepertuar().
    subscribe(programy => this.programy =  programy);
  }


  constructor(private programmeService: ProgrammeService) { }

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

export interface Cinema {
  name: string;
  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

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

  getCinemaPrograme(): Observable<CinemaProgramme[]> {
    return this.http.get<CinemaProgramme[]>(this.url + 'cinema/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');
  }

  getRepertuar(): Observable<Array<ProgrammeItems>> {
    return this.http.get<Array<ProgrammeItems>>(this.url + 'programme/getAll');
  }


  constructor(private http: HttpClient) { }
}

Już meczę się z tym kolejny dzień ... Szukam i nic nie moge znalezc konkretnego ... Prosiłbym o pomoc :/

 

Answer 1

Podepnij się pod zdarzenie change i na nie wywołaj odpowiednią metodę z komponentu, która pobierze i ustawi to co potrzebujesz wyświetlić (nie zagłębiałem się w Twoje API). Przykład:

<select (change)="onChange($event)" name="cos">

  onChange(event) {
    console.log("Selected option value: ", event.target.options[event.target.selectedIndex].value);
  }