在角度6中找不到類型為“對象”的其他支持對象“ [對象對象]”

Question

我剛接觸angular6。我想在選擇選項中將內容顯示為鍵（鍵為label name）和值。 我可以從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，budget作為選擇選項

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