API调用后未加载下拉值

Question

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

以下是代码：

       <div *ngFor="let metricData of responseDropDownDataVal">
          <p>{{metricData.name}}</p>
       </div>

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

这是我的responseDropDownDataVal的http get方法：

  this.http.get(environment.envUrl + '/cloudWatch/dropDownForMetrics?' + params, { headers }).subscribe(data => {
    this.responseDropDownData = data;
    console.log("Drop Down Data");
    this.responseDropDownDataVal = this.responseDropDownData.data;
    console.log(this.responseDropDownDataVal);  
  },

有人可以建议我的代码在哪里错误吗？我在段落标记中获得了值，但在下拉列表中却没有得到

Answer 1

我认为当您使用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>

然后请尝试分离出两种绑定方式：

[ngModel]="metricData" (ngModelChange)="onChange($event)"

然后

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

Answer 2

您可以试试看吗

  <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>

Answer 3

   import { BootstrapSelectDirective } from './../bootstrap-select.directive';
   @ViewChild(BootstrapSelectDirective)
    bootstrapSelectDirective: BootstrapSelectDirective;

      this.http.get(environment.envUrl + '/cloudWatch/dropDownForMetrics?' + params, { headers }).subscribe(data => {
      this.responseDropDownData = data;
      console.log("Drop Down Data");
      this.responseDropDownDataVal = this.responseDropDownData.data;
      console.log(this.responseDropDownDataVal);
      this.loadCloudWatchVolumeGraph(this.responseDropDownDataVal[0]);
      this.bootstrapSelectDirective.refresh();
    },

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