在下拉列表中使用 URL 中的元素答案

【问题标题】：Using Elements in the Url in dropdown在下拉列表中使用 URL 中的元素
【发布时间】：2019-02-21 08:42:31
【问题描述】：

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

【问题讨论】：

你能发布你到目前为止所做的事情吗？
@DarshanMehta 我编辑了问题看看

标签： java angular url dropdown

【解决方案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>

【讨论】：