Angular 2 *ngFor 错误

Question

我收到此错误 “找到一个不同的支持对象 '[object Object]' 类型为 'object'。NgFor 仅支持绑定到 Iterables，例如数组。”

这是我的代码：

<tbody>

                <tr *ngFor='let tab of tabs'>
                    <td>
                        <ul class="list-unstyled list">
                            <li><a href="#" class="anchorLink"><i class="icon-home scolor"></i><font color="white">{{tab.TabName}}</font></a></li>

                        </ul>
                    </td>
                </tr>



            </tbody>

navMenu.copnent.ts

import { Component, OnInit } from '@angular/core';
import { NavMenuService } from './navMenu.service';
import { InavMenuTabs } from './navMenu';

@Component({
selector: 'nav-menu',
moduleId: module.id,
templateUrl: 'navMenu.component.html'

})

export class NavMenuComponent implements OnInit {

tabs: InavMenuTabs[];
errorMessage: string;
constructor(private _navMenuService: NavMenuService) {

}


ngOnInit(): void {
    this._navMenuService.getTabs(1, 'XXXX')
        .subscribe(tabs => this.tabs = tabs,      
        error => this.errorMessage = <any>error);



}
}

navMenu.service

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { InavMenuTabs } from './navMenu';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

@Injectable()

export class NavMenuService {

private _fileUploadAPI = 'http://localhost:50180/API/FileUpload/GetTabs/';
constructor(private _http: Http) {

}

getTabs(LinkID: number, PSNL_UID: string): Observable<InavMenuTabs[]> {
    return this._http.get(this._fileUploadAPI + LinkID.toString() + '/' + PSNL_UID)
        .map((response: Response) => <InavMenuTabs[]>response.json())
        .do(data => console.log('All' + JSON.stringify(data)))
        .catch(this.handleError);


}

private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server Error');
}
}

navMenu.ts

export interface InavMenuTabs {

LinkTabID: number;
TabName: string;
}

Answer 1

嗯，看看你的 cmets，这就解释了。您传入的数据不是一个数组，而是一个名为result 的对象，因此您必须从该对象中获取内容并将其存储在您的数组中。

当您映射传入的数据时，它会显示：

{"result":[{"LinkTabID":1,"TabName":"Upload File"}]}

这是一个包含数组的对象。所以你必须从你的对象中获取那个数组。

ngOnInit(): void {
    this._navMenuService.getTabs(1, 'XXXX')
        .subscribe(
           data => {
             this.tabs = data.result
           });
}