Как настроить Angular 2 для загрузки разных файлов. json на основе ? - PullRequest
0 голосов
/ 17 июня 2020

У меня есть приложение Angular, в которое мне нужно загрузить разные. json файлы для получения данных. Мне удалось получить сразу все данные во всех файлах. Теперь я хочу загрузить конкретный файл. json на основе моего выбора хоста. Например, у меня есть 2 файла, private_servers. json и public_servers. json, и я хочу иметь возможность выбирать, хочу ли я publi c или частный размещенный сервер. Сейчас он загружается из обоих файлов. Я не хотел использовать каскадное раскрывающееся меню или зависимое раскрывающееся меню, потому что позже в моем приложении будет больше файлов, поэтому отношения родитель / потомок могут стать сложными позже. Есть ли кто-нибудь, кто может дать предложение или направление, которое я могу к? Вот мой код. Файл TS:

      export class publicServer {
        constructor(public id: number, public name: string) {
        }
      }

      export class Host{
        constructor(public id: number, public name: string) {
        }
      }

      export class privateServer {
        constructor(public id: number, public name: string) {
        }
      } 



  export class JunctionComponent implements OnInit {

  junctionToCreateOrEdit: Junction;

  hosts: Observable<Host[]>;
  privateServers: Observable<privateServer[]>;
  publicServers: Observable<publicServer[]>;

  constructor(
      private formsDataService: JunctionsDataService,
      private route:ActivatedRoute,
      private router: Router, private http: HttpClient
  ) { }

  ngOnInit() {
    this.privateServers = this.http.get<privateServer[]>('./assets/public.json');
    this.publicServers = this.http.get<publicServer[]>('./assets/private.json');
    this.hosts= this.http.get<Host[]>('./assets/hosts.json');


    this.junctionToCreateOrEdit = new Junction("", this.servers[0], new Date(), new Date());
  }

HTML файл:

<div class="container">
  <fieldset class="form-group">
    <label>Host</label>
    <select class="form-control" id="host"
            required
            [(ngModel)]="junctionToCreateOrEdit.host" name="host" #host="ngModel">
      <option *ngFor="let hos of hosts | async" [value]="hos.name">{{hos.name}}</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label>Server</label>
    <select class="form-control" id="server"
            required
            [(ngModel)]="junctionToCreateOrEdit.server" name="server" #server="ngModel">
      <option *ngFor="let ser of servers | async" [value]="ser.name">{{ser.name}}</option>
    </select>
  </fieldset>
  <button class="btn btn-success" (click)="saveForm()">Save</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...