Javascript Angular 2+，在下拉列表中更改读取值并加载数据-json文件

需要任何版本2,3,4,5的帮助，我从过去两周开始尝试。任何帮助都将不胜感激

抱歉，由于代码太大，我无法将其添加到Plunker或JSFIDLE中

我的工作流程是这样的

1-加载metadata.json

2-从metadata.json中读取第一个值

3-从APP_初始化器中的文件夹加载第一个json

4-在下拉列表中填充metadata.json中的所有值

5-每当下拉值更改时，加载relaevant json并在UI中显示对象

我有3个组件

Navigation.component下拉列表更改正在此处触发

dashboard.component数据将根据下拉列表内容进行更改

programmer.component数据将根据下拉列表内容进行更改

每当触发下拉更改事件时，我都希望从json加载数据

metadata.json

app.config.ts

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AppConfig {
    config: any;
    user: any;
    objects: any;
    fileName: any;
    constructor(private http: Http) {
        console.log('ConfigService called.')
    }

    load(projectName) {
        return new Promise((resolve) => {

            /** This method: Loads "host_configuration.json" to get the current working environment. */
            this.http.get('./assets/host_configuration.json').map(res => res.json())
                .subscribe(config => {
                    console.log('Configuration loaded');
                    this.config = config;

                    /** This method: Loads all the objects from json */
                    let getSummaryParameters: any = null;
                    getSummaryParameters = this.http.get('./assets/json/' + projectName);

                    if (getSummaryParameters) {
                        getSummaryParameters
                            .map(res => res.json())
                            .subscribe((response) => {
                                this.objects = response;
                                return resolve(true);
                            });
                    } else {
                        return resolve(true);
                    }
                });
        });
    }

    loadMetadata() {
        return new Promise((resolve) => {
        //reading metadata.json
            this.http.get('./assets/metadata.json').map(res => res.json())
                .subscribe(fileName => {
                    console.log('metadata loaded');
                    this.fileName = fileName;
                    return resolve(true);
                });
        });
    }
}

app.module.ts

dashboard.component.ts

程序员.component.ts

navigation.component.ts

---

由于您无法共享演示，我制作了自己的演示，演示如何从API/本地json加载数据，您可以在这里尝试

请随意询问这是否不是您想要的场景/我理解错了

这里做了两件事，首先，从构造函数中获取元数据，它将在初始化应用程序时加载您的数据，然后在选项中选择一个单击方法以获取所选数据，然后该数据可以发送到url以获取另一个数据

我不知道我在这里使用的是哪个css框架AngularMaterial2

app.component.html

app-config.class.ts

---

谢谢你的回答。我只想知道几件事。1.我的下拉菜单和仪表板位于不同的组件中。我想从navigation.component到dashboard.component获取{{meta}}值。2.初始加载我需要加载值，而不仅仅是下拉列表。你能帮我一下吗？如果我做对了，那么你需要从路由器传递值并接收值，然后打电话给一个服务，在那里你可以得到你所需要的。任何参考JSFIDLE，plunker请非常感谢你，让我检查一下。我看到一个问题，初始数据没有更新。我想在初始化中显示下拉值和帖子。这可能吗？是的，您需要一个服务来完成这项工作，或者@Input/@Output将数据从父级传递到子级，反之亦然。你可以看到我在这里使用app config作为一个服务来保存数据。

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AppConfig {
    config: any;
    user: any;
    objects: any;
    fileName: any;
    constructor(private http: Http) {
        console.log('ConfigService called.')
    }

    load(projectName) {
        return new Promise((resolve) => {

            /** This method: Loads "host_configuration.json" to get the current working environment. */
            this.http.get('./assets/host_configuration.json').map(res => res.json())
                .subscribe(config => {
                    console.log('Configuration loaded');
                    this.config = config;

                    /** This method: Loads all the objects from json */
                    let getSummaryParameters: any = null;
                    getSummaryParameters = this.http.get('./assets/json/' + projectName);

                    if (getSummaryParameters) {
                        getSummaryParameters
                            .map(res => res.json())
                            .subscribe((response) => {
                                this.objects = response;
                                return resolve(true);
                            });
                    } else {
                        return resolve(true);
                    }
                });
        });
    }

    loadMetadata() {
        return new Promise((resolve) => {
        //reading metadata.json
            this.http.get('./assets/metadata.json').map(res => res.json())
                .subscribe(fileName => {
                    console.log('metadata loaded');
                    this.fileName = fileName;
                    return resolve(true);
                });
        });
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, JsonpModule } from '@angular/http';

import { AppRoutes } from './app.routing';
import { AppConfig } from './app.config';

import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { SharedModule } from './shared/shared.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BreadcrumbsComponent } from './navigation/breadcrumbs/breadcrumbs.component';
import { TitleComponent } from './navigation/title/title.component';


@NgModule({
    declarations: [
        AppComponent,
        NavigationComponent,
        BreadcrumbsComponent,
        TitleComponent

    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(AppRoutes),
        SharedModule,
        HttpClientModule,
        HttpModule,
        JsonpModule,
        FormsModule

    ],
    providers: [AppConfig,
        {
            provide: APP_INITIALIZER,
            useFactory: (config: AppConfig) => () => config.load('project_q_1234.json'),
            deps: [AppConfig],
            multi: true
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';
import { AppConfig } from '../../app.config';

declare var Chart;

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: [
        './dashboard.component.css'
    ]
})

export class DashboardComponent implements OnInit {

    constructor(public appConfig: AppConfig, private hostConfig: AppConfig, public getSummaryParameters: AppConfig) { }

    ngOnInit() {
        this.updates();
    }

    updates() {

        //assign all Parameters to objects
        this.objects = this.getSummaryParameters.objects;

        var JsonData = this.objects.Information.data;
        console.log(JsonData["0"]["0"] + " : " + JsonData["0"][1]);
    }
}

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Chart } from 'chart.js';
import { CommonModule } from '@angular/common';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { AppConfig } from '../../app.config';
declare function ChangeSortOrder(): any;

@Component({
    selector: 'app-simple-page',
    templateUrl: './programmer.component.html'
})

export class ProgrammerComponent implements OnInit {
    objects;

    constructor(public appConfig: AppConfig, private hostConfig: AppConfig, public getSummaryParameters: AppConfig, private modalService: NgbModal) { }

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

        //assign all Parameters to objects
        this.objects = this.getSummaryParameters.objects;

    }

}

import { Component, ElementRef, OnInit, ViewChild, Injectable, NgModule } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { AppConfig } from '../app.config';
import { DashboardComponent } from '.././pages/dashboard/dashboard.component';
import { ProgrammerComponent } from '.././pages/programmer/programmer.component';


@Component({
  selector: 'app-admin',
  templateUrl: './navigation.component.html',
  providers: [DashboardComponent, ProgrammerComponent]
})

@Injectable()
export class NavigationComponent implements OnInit {

  fileName: any;
  selectedfileName: any;
  config: any;
  objects: any;



  constructor(public menuItems: MenuItems, private http: Http, private appConfig: AppConfig, public router: Router,
    private hostConfig: AppConfig, public getSummaryParameters: AppConfig, private dashboardComponent: DashboardComponent,
    private programmerComponent: ProgrammerComponent) {

  }

  ngOnInit() {
    this.appConfig.loadMetadata().then(fileName => {
      this.fileName = this.appConfig.fileName;

      //Initial loading for project Drop-down, Fetch first JSON from metadata.json
      this.selectedfileName = 'project_q_1234.json';
    });

  }

  refreshApp(projectName) {
    this.appConfig.load(projectName).then(objects => {
      this.objects = objects;
      this.updateData();

     //this commented code partially works but data is not loading properlly
      //this.dashboardComponent.updates();
      //this.programmerComponent.updateData();
      //this.qCProgrammerComponent.updateQCData();
    });
  }

  updateData() {
    console.log("Dropdown change start");
    //load all the host related settings
    this.config = this.hostConfig.config;
    localStorage.setItem('url', this.config.host);
    localStorage.setItem('folder', this.config.folder);
}

<p>
    Using jsonplaceholder.typicode.com API
</p>
<mat-form-field style="width: 100%">
    <mat-select placeholder="Select Any Users" [(value)]="selectedUser">
        <mat-option *ngFor="let meta of metadata" (click)="getInfoAboutIndividualMeta(meta)" [value]="meta.name">
            {{ meta.name }}
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field style="width: 100%" *ngIf="selectedUser">
    <mat-select placeholder="Select Posts from {{selectedUser}}">
        <mat-option *ngFor="let post of posts" (click)="selectedPost(post)" [value]="post.title">
            {{ post.title }}
        </mat-option>
    </mat-select>
</mat-form-field>


<mat-card *ngIf="selectPost">
    <h1>{{selectPost?.title}}</h1>
    <p [innerHTML]="selectPost?.body"></p>
</mat-card>

    name = 'Angular 6';
  metadata: any[];
  posts: any[];
  selectedUser: string;
  selectPost: Object;
  constructor(private appConfig: AppConfig) {
    this.metadata = [];
    this.posts = [];
    this.initialize();
  }

  initialize() {
    this.appConfig.getMetadataJSON().subscribe(res => {
      this.metadata = res;
      this.selectedUser = this.metadata[0].name;
    });
  }

  getInfoAboutIndividualMeta(meta: Object) {
    console.log(meta);
    const userId = meta.id;
    this.appConfig.getIndividualMetadataJSON(userId).subscribe( res => {
      this.posts = res;
    });
  }

  selectedPost(post: Object) {
    this.selectPost = post;
  }

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs';

@Injectable()
export class AppConfig {

  constructor(private httpClient: HttpClient) {

  }

  public getMetadataJSON(): Observable<any> {
    // Due to stackblitz can't get the local access I put this value to another api source
    // const apiUrl = './assets/metadata.json'; // You can use this as well
    const apiUrl = 'https://jsonplaceholder.typicode.com/users';
    return this.httpClient.get(apiUrl);
  }

  public getIndividualMetadataJSON(userId: number): Observable<any> {
    const apiUrl = 'https://jsonplaceholder.typicode.com/posts?userId=' + userId;
    return this.httpClient.get(apiUrl);
  }
}