如何使用Angular 6实现数据填充下拉列表
如何使用Angular 6实现数据填充下拉列表
提问于 2018-06-06 04:54:09
我刚接触Angular 6，或者说Angular period。我想在我的页面上放置一个下拉列表，它将填充我从JSON请求中获得的值。我该如何着手完成这项任务呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-06 05:02:13
// 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>Stack Overflow用户
发布于 2018-06-06 05:02:04
假设需要放在下拉列表中的数据实际上是一个数组：
myData = {data: [v1, v2, v3, v4]};在你的component.html中
<select>
<option *ngFor="let eachVal of myData['data']>
{{eachVal}}
</option>
</select>应该能行得通。
因为您没有提供您的代码片段，所以我有一个使用select和option标签以及Angular的stackBlitz example。看一下它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50708771
复制相关文章
相似问题