Arrays 角度-如何根据选择中的选项更改从JSONA下载的数据

组件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 *ngIf="kino.id" *ngFor="let kin of kina.cinemaProgramme.programmeItems" style="color:white;">
    {{ kin.movie.title }}
  </div>
</div>

维比尔兹基诺
{{kino.name}}{{kino.id}}
{{kin.movie.title}

组件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(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;
 }

从'@angular/core'导入{Component，OnInit}；
从“../program.service”导入{ProgrammeService}；
从“@angular/common”导入{Time}；
@组成部分({
选择器：“应用程序重新运行程序”，
templateUrl:“./repertuar.component.html”，
样式URL:['./repertuar.component.css']
})
导出类RepertuarComponent在init上实现{
电影：CinemaProgram[]；
剧目：电影节目[]；
基纳：电影[]；
程序：数组=[]；
GetCinemaProgram（）：无效{
这个.programmeService.getCinemaProgram（）。
订阅（repertuar=>this.repertuar=repertuar）；
}
getCinema（）：无效{
这是.programmeService.getCinema（）。
订阅（kina=>this.kina=kina）；
}
GetCinemaProgram（）：void{
这个.programmeService.getCinemaProgram（）。
订阅（film=>this.film=film）；
}
getReuteruar（）：void{
这是一个.programmeService.getRepertuar（）。
订阅（programy=>this.programy=programy）；
}
构造函数（私有programmeService:programmeService）{}
恩戈尼尼特（）{
这个.getCinemaProgram（）；
这个.getCinema（）；
}
}
导出接口电影院{
名称：字符串；
id：编号；
电影节目：电影节目；
}
出口接口方案{
id：编号；
程序项：数组；
}
导出接口程序项{
电影：电影；
时间：日期[]；
}
导出接口电影{
id？：编号；
标题？：字符串；
导演？：字符串；
长度：时间；
description？：字符串；
}

服务

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

@Injectable({
  providedIn: 'root'
})

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) { }
}

从'@angular/core'导入{Injectable}；
从“rxjs”导入{of，Observable}；
从“./repertuar/repertuar.component”导入{ProgrammeItems，CinemaProgram，Cinema}；
从'@angular/common/http'导入{HttpClient}；
@注射的({
providedIn:'根'
})
导出类程序服务{
专用url=http://localhost:8080/';
getCinemaPrograme（）：可观察{
返回this.http.get（this.url+'cinema/getAll'）；
}
GetCinemaProgram（）：可观察{
返回此.http.get（'http://localhost:8080/programme/get/6');
}
getCinema（）：可观察{
返回此.http.get（'http://localhost:8080/cinema/getAll');
}
getRepertuar（）：可观察{
返回this.http.get（this.url+'program/getAll'）；
}
构造函数（私有http:HttpClient）{}
}

我正在考虑获取电影院id（电影院名称） 在[value]=“kina.id”中 并将其应用于显示给定曲目时的依赖项，但即使是第二个ngfora中的JSON属性也根本不显示：/我该怎么做/

对不起，我的英语不好。

您的第二个div（second ngFor）不显示，因为您有

*ngIf=“kino.id”

，但kino仅在内部定义

{{kino.name}}{{kino.id}}

创建的每个选项都有自己的

kino.id

。但在选项之外，基诺是未定义的。所以你的情况是错误的。如果要检查在div中选择的值（second

*ngFor

），则应在ts中声明一个变量a变量以保留所选id。例如：

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

因此，带有第二个

*ngIf

的div将成为

<div *ngIf="selectedKinoId" *ngFor="let kin of getCinemaById(selectedKinoId).cinemaProgramme.programmeItems" style="color:white;">
  {{ kin.movie.title }}
</div>

{{kin.movie.title}

Yeyyy！！它起作用了！谢谢你，好人！！：）但是我需要再添加一个div

…带有NGFOR的div

getCinemaById(id){
  for(let kin of kina) {
    if(kin.id == id) {
      return kin;
    }
  }
}

<div *ngIf="selectedKinoId" *ngFor="let kin of getCinemaById(selectedKinoId).cinemaProgramme.programmeItems" style="color:white;">
  {{ kin.movie.title }}
</div>