Question

我是Angular 6的新手，或者只是Angular时期。我想在我的页面上放置一个下拉列表，其中将填充我从其他JSON请求获得的值。我将如何完成这项任务？

Answer 1

 // http request with your server data.
 options$ = this.yourHttpService.getOptions(API);  // returns an Observable

假设JSON格式是（我们将调用option.value int HTML）：

{
    value: 'Option1',
    otherValue: '....'
}

在您的html文件中，使用async填充选项：

    <select [(ngModel)]="yourOption" id="category">
       <option value="" disabled selected>>select an option</option>
       <option *ngFor="let option of options$ | async" [value]="option.value">{item.category}}</option>
     </select>

Answer 2

假设您需要放入下拉列表的数据实际上是一个数组：

 myData = {data: [v1, v2, v3, v4]};

在component.html

中

<select>
  <option *ngFor="let eachVal of myData['data']>
          {{eachVal}}
  </option>
</select>

应该这样做。

由于您没有提供代码段，因此我有一个stackBlitz example使用select和option代码与Angular。看看他们。

如何使用Angular 6实现数据填充下拉列表

2 个答案: