在角度 6 中找不到“object”类型的不同支持对象“[object Object]”答案

【问题标题】：Cannot find a differ supporting object '[object Object]' of type 'object' in angular 6在角度 6 中找不到“object”类型的不同支持对象“[object Object]”
【发布时间】：2019-01-16 15:11:05
【问题描述】：

我是 Angular 6 的新手。我想在选择选项中将内容显示为键（键作为标签名称）和值。我能够从 restcontroller 获取 JsonObject 但无法以角度进行处理。这是我的代码。

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

export class MapHeader {
    public AOV: string;
    public budget: string;
    public CPO: string;
}

.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()) 打印以下内容

Object
AOV:
(19) ["sessions", "Budget", "CTR"]
CPC:
(19) ["sessions", "Budget", "CTR"]
CPO:
(19) ["sessions", "Budget", "CTR"]

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 作为标签，会话、ctr、预算作为选择选项

【问题讨论】：

你能澄清一件事吗，(19) 在你的控制台输出中显示的是什么？它是其他东西响应的一部分吗？？

标签： javascript java angular angular-forms

【解决方案1】：

您需要处理您的响应以便将数组作为输出：

   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;
            }
        );
    }

【讨论】：