[英]Populate the data in drop-down from a GET json response- Angular4
I am trying to show json keys/fields in a dropdown for commands; 我试图在命令的下拉列表中显示json键/字段; which is Object type(see json below) Eg: "key1","key2" should appear in dropdown. 这是对象类型(参见下面的json)例如:“key1”,“key2”应出现在下拉列表中。 Initially used *ngfor but it gives error- "ngfor only supports binding for iterables such as Arrays". 最初使用* ngfor但它给出了错误 - “ngfor仅支持对诸如Arrays之类的迭代的绑定”。 Since my json doesn't contain Array, so tried using ng-options in but not able to populate the dropdown. 由于我的json不包含Array,因此尝试使用ng-options但无法填充下拉列表。 My json looks like: 我的json看起来像:
{
id: ‘bla’,
commands: {
“key1” : { },
“key2”: { }
}
}
html code: HTML代码:
<select ngModel="selectedName" ng-options="cmd for cmd in cmdJson" name= "CapabilityCmd" required>
In Typescript code: 在Typescript代码中:
this.http.get(URL, options)
.pipe(map ((response) => response.json()))
.subscribe((res) => {
this.commandResponse = res;
this.cmdJson = this.commandResponse.commands;
console.log("commands:", this.cmdJson);
});
I notice that cmdJson is showing the correct response(ie; 我注意到cmdJson显示正确的响应(即;
{“key1” : { }, “key2”: { }} {“key1”:{},“key2”:{}}
) in console but not populating in drop-down box. )在控制台中但不在下拉框中填充。
There is no
ng-options available in angular, you are using angularjs syntax, instead use ngFor
角度中no
可用的ng选项,您使用的是angularjs语法,而是使用ngFor
<select [(ngModel)]="selectedName">
<option *ngFor="let cmd of cmdJson" [value]="cmd ">
{{cmd}}
</option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.