「タイプ 'object'の異なるサポートオブジェクト '[objectObject]'を見つけてください。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;
}
さて、あなたのコメントを見て、それはそれを説明しています。受信データは配列ではなく、という名前のオブジェクトresultであるため、そのオブジェクトからコンテンツを取得して配列に格納する必要があります。
受信データをマッピングすると、次のように表示されます。
{"result":[{"LinkTabID":1,"TabName":"Upload File"}]}
これは配列を含むオブジェクトです。したがって、オブジェクトからその配列を取得する必要があります。
ngOnInit(): void {
this._navMenuService.getTabs(1, 'XXXX')
.subscribe(
data => {
this.tabs = data.result
});
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加