在下拉列表中使用Url中的元素

Question

在这里，我有一个任务，我已经给了4个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

您可以尝试使用select元素的changeEvent以自动方式执行此操作。在我的解决方案中，我删除了按钮，因此在选择选项时开始下载。并且重要的是在观察者中使用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>