Angular API调用后未加载下拉列表值

在我的应用程序中，我从API调用中获取下拉列表的值。我假设在API调用之前，下拉列表正在加载，并且没有得到值。但是，如果我尝试在div标记上打印相同的选项，我就会得到值

代码如下：

{{metricData.name}

{{metricData.name}

这是我的responseDropDownDataVal的http get方法：

this.http.get（environment.envUrl+'/cloudWatch/dropDownForMetrics？'+params，{headers}）.subscribe（数据=>{
this.responseDropDownData=数据；
console.log（“下拉数据”）；
this.responseDropDownDataVal=this.responseDropDownData.data；
console.log（this.responseDropDownDataVal）；
},

有人能告诉我我的代码哪里错了吗？我得到的是段落标签上的值，而不是下拉列表上的值

---

我认为当您使用ngModel创建选择时，您还需要在选项上使用ngValue，如下所示：

<select #select1 bootstrapSelect [(ngModel)]="metricData"  data-selected-text-format="static" title="Select Volumes">
   <option 
       [ngValue]="metricData.name"
       *ngFor="let metricData of responseDropDownDataVal" >
       {{metricData.name}} 
   </option>

然后

onChange(value) {
    this.metricData = value;
}

---

你能试试看吗

  <select #select1 bootstrapSelect [(ngModel)]="metricData" data-selected-text-format="static" title="Select Volumes">
       <option [ngValue]="metricDataOption.name" *ngFor="let metricDataOption of responseDropDownDataVal" > {{metricDataOption.name}} 
       </option>
    </select>

{{metricDataOption.name}

从“/../bootstrap select.directive”导入{BootstrapSelectDirective}；
@ViewChild（BootstrapSelectDirective）
bootstrapSelectDirective:bootstrapSelectDirective；
this.http.get（environment.envUrl+'/cloudWatch/dropDownForMetrics？'+参数，{headers}）.subscribe（数据=>{
this.responseDropDownData=数据；
console.log（“下拉数据”）；
this.responseDropDownDataVal=this.responseDropDownData.data；
console.log（this.responseDropDownDataVal）；
this.loadCloudWatchVolumeGraph（this.responseDropDownDataVal[0]）；
此.bootstrapSelectDirective.refresh（）；
},

---

由于下拉列表的数据是在组件加载后加载的，我刷新了bootstrapSelectDirective现在下拉列表加载数据

您的api正在花时间响应？？我假设在api调用之前下拉列表正在加载。但是在段落标记中，我在组件加载时获取值。在调用api的地方..尝试cngOnInit（）上的所有api我正在调用ngOnit（）上的api只有@Aniketavhad您才能显示API调用的响应，以及您如何在组件中声明

metricData

？我也使用了ngValue，但仍然无法获取值。是否有其他方法可以在加载组件后获取值或刷新下拉列表值？我无法100%确定您的想法重新查看。您是否看到在选择中创建的选项？您只是没有在组件中获得设置的值吗？Ohhhh…您不需要使ngModel的名称与循环中的变量相同。请尝试

让responseDropDownDataVal的metricDataOption

然后

metricDataOption。name

我在更改ngModel value aslo im没有看到任何数据im没有在组件下拉列表中获得设置的值，但我在段落标记@Nickon中获得相同的值页面刷新填充在段落标记中的数据在加载此容器时是位延迟。我假设从API调用获得的新值需要时间，到me将加载容器和下拉列表值。

  <select #select1 bootstrapSelect [(ngModel)]="metricData" data-selected-text-format="static" title="Select Volumes">
       <option [ngValue]="metricDataOption.name" *ngFor="let metricDataOption of responseDropDownDataVal" > {{metricDataOption.name}} 
       </option>
    </select>