У меня есть приложение 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>