Использование элементов в URL в раскрывающемся списке

Question

Здесь у меня есть задание, в котором мне были даны 4 URL-ссылки, в которых приводятся сведения о студенте и выбранном им курсе. Теперь я не хочу создавать раскрывающийся список, в котором отображается имя студента и когда я выбираюпоявится имя, соответствующее его деталям из оставшегося URL.В Component.ts

urlNames = 'https://api.myjson.com/bins/1g7sq4';
urlDetails = 'https://api.myjson.com/bins/16r07g';
urlNumbers = 'https://api.myjson.com/bins/1c3wng';
urlArray = 'https://api.myjson.com/bins/18py7w';

strData:String='';
Name:string[]=[];

constructor(private netService:NetService){}

getData(){
  this.netService.getData(this.urlNumbers)
    .subscribe(resp => {
    this.strData =JSON.stringify(resp);
})
}

В component.html

 <div class="container">
   <label>Select:</label>
   <select class="form-control" [(ngModel)]="sname">
     <option value=null>Select the Option ...</option>
     <option>https://api.myjson.com/bins/1g7sq4 </option>
   </select>
   <button class="btn-primary" (click)="getData()">Get Data</button>
   {{strData}}
 </div>

Answer 1

Вы можете попробовать сделать это автоматически, используя changeEvent элемента select.В моем решении я удалил кнопку, поэтому начинайте загрузку, когда выбираете опцию.И важно сделать отписку с помощью оператора first () в обозревателе.

component.ts:

const options = [{
    value: null,
    key: 'Select the Option ...'
},{
    value: 'https://api.myjson.com/bins/1g7sq4',
    key: 'Names'
}, {
    value: 'https://api.myjson.com/bins/16r07g',
    key: 'Details'
}, {
    value: 'https://api.myjson.com/bins/1c3wng',
    key: 'Numbers'
}, {
    value: 'https://api.myjson.com/bins/18py7w',
    key: 'Array'
}]

strData:String='';
Name:string[]=[];

constructor(private netService:NetService){}

getData(url: string): void {
    this.netService.getData(url).pipe(
        first(),
        tap(res => (this.strData =JSON.stringify(resp)))
    ).subscribe()
}

view.html

<div class="container">
  <label>Select:</label>
  <select class="form-control" #select (change)="getData(select.value)">
    <option *ngFor="let option of options" [value]="option.value">{{option.key}}</option>
  </select>
  {{strData}}
</div>