[英]Cannot find a differ supporting object '[object Object]' of type 'object' in angular 6
I'm new to angular 6. I want to display the contents as key (key as label name ) and value in select options. 我刚接触angular6。我想在选择选项中将内容显示为键(键为label name)和值。 I'm able to get JsonObject from restcontroller but unable to process in angular.
我可以从restcontroller获取JsonObject,但无法以角度进行处理。 here is my code.
这是我的代码。
import { MapHeader } from '../../models/mapheader';
headerMapper(){
this.clientService.getHeaders().subscribe(
res => {
console.log(res.json());
this.mapper = Array.of(res.json());
console.log(this.mapper);
this.ismapped = false;
}
);
}
mapperheader.ts
mapperheader.ts
export class MapHeader {
public AOV: string;
public budget: string;
public CPO: string;
}
.html
html的
<div>
<form *ngFor="let map of mapper">
<mat-form-field>
<mat-select placeholder="{{map}}">
<!--<mat-option>None</mat-option>-->
<mat-option *ngFor="let option of map" [value]="option">{{option}}</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
console.log(res.json()) prints the below console.log(res.json())显示以下内容
Object
AOV:
(19) ["sessions", "Budget", "CTR"]
CPC:
(19) ["sessions", "Budget", "CTR"]
CPO:
(19) ["sessions", "Budget", "CTR"]
console.log(this.mapper) this prints the below console.log(this.mapper)显示以下内容
Array(1)
0:
AOV:
(19) ["sessions", "Budget", "CTR"]
CPC:
(19) ["sessions", "Budget", "CTR"]
CPO:
(19) ["sessions", "Budget", "CTR"]
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3138)
at checkAndUpdateDirectiveInline (core.js:9251)
at checkAndUpdateNodeInline (core.js:10512)
at checkAndUpdateNode (core.js:10474)
at debugCheckAndUpdateNode (core.js:11107)
at debugCheckDirectivesFn (core.js:11067)
at Object.eval [as updateDirectives] (AddNewClientComponent.html:47)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11059)
at checkAndUpdateView (core.js:10456)
at callViewAction (core.js:10697)
View_AddNewClientComponent_3 @ AddNewClientComponent.html:45
AOV as label and sessions,ctr,budget as select option AOV作为标签和会话,ctr,budget作为选择选项
You need to process your response in order to have an array as output: 您需要处理响应才能将数组作为输出:
import { MapHeader } from '../../models/mapheader';
headerMapper(){
this.clientService.getHeaders().pipe(map(res => res.json())).subscribe(
res => {
console.log(res.json());
this.mapper = Object.keys(res).map( elm => {elm : res[elm]}) ;
console.log(this.mapper);
this.ismapped = false;
}
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.