[解決済み] Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgForはArrayのようなIterableへのバインディングのみをサポートしています'。
2022-03-01 23:23:40
質問
jsonファイルからデータを取得するangularアプリを作りました。しかし、htmlでデータを表示するのに問題があります。多くの変数がオランダ語で書かれています。私はまた、このすべてのために少し新しいです:)
これは私のサービスです。
import {Injectable} from '@angular/core';
import {Http, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from "rxjs";
import {Afdelingen} from "./models";
@Injectable()
export class AfdelingService {
private afdelingenUrl = '/assets/backend/afdelingen.json';
constructor(private http: Http) {
}
getAfdelingen(): Observable<Afdelingen[]> {
return this.http.get(this.afdelingenUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = <Afdelingen[]>res.json();
return body || {};
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
addAfdeling(afdelingsNaam: string, afdeling: any): Observable<Afdelingen> {
let body = JSON.stringify({"afdelingsNaam": afdelingsNaam, afdeling: afdeling});
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.post(this.afdelingenUrl, body, options)
.map(res => <Afdelingen> res.json())
.catch(this.handleError)
}
}
これは私のjsonファイルの一部です。
{
"afdelingen": [
{
"afdelingsNaam": "pediatrie",
"kamernummer": 3.054,
"patientid": 10001,
"patientennaam": "Joske Vermeulen",
"reden": "Appendicitis",
"opname": "12/05/2017",
"ontslag": "28/06/2017",
"behandelingstype": "nazorg",
"behandelingsomschrijving": "wondverzorging",
"behandelingsdatum": "10/06/2017",
"behandelingstijd": "10:20",
"vegitarisch": false,
"Opmerkingen": "",
"sanitair": true,
"kinderverzorgingsruimte": false,
"salon": true,
"hulp": true,
"width": 5,
"height": 5
},
{
"afdelingsNaam": "pediatrie",
"kamernummer": 3.055,
"patientid": 10002,
"patientennaam": "Agnes Vermeiren",
"reden": "Beenbreuk",
"opname": "18/05/2017",
"ontslag": "30/06/2017",
"behandelingstype": "nazorg",
"behandelingsomschrijving": "wondverzorging",
"behandelingsdatum": "10/06/2017",
"behandelingstijd": "10:20",
"vegitarisch": true,
"Opmerkingen": "",
"sanitair": true,
"kinderverzorgingsruimte": false,
"salon": true,
"hulp": false,
"width": 5,
"height": 5
}]}
コンポーネントです。
import {Component, OnInit, Input} from '@angular/core';
import {Afdelingen} from "../models";
import {AfdelingService} from "../afdeling.service";
import {PatientService} from "../patient.service";
@Component({
selector: 'app-afdeling',
templateUrl: './afdeling.component.html',
styleUrls: ['./afdeling.component.css']
})
export class AfdelingComponent implements OnInit {
afdeling: Afdelingen[];
errorMessage:string;
constructor(private afdelingService: AfdelingService, private patientService: PatientService) { }
ngOnInit() {
this.getData()
}
getData() {
this.afdelingService.getAfdelingen()
.subscribe(
data => {
this.afdeling = data;
console.log(this.afdeling);
}, error => this.errorMessage = <any> error);
}
}
とhtmlを作成します。
<ul>
<li *ngFor="let afd of afdeling">
{{afd.patientid}}
</li>
</ul>
解決方法は?
エラーメッセージにあるように
ngFor
のようなIterableのみをサポートしています。
Array
に使用することはできません。
Object
.
変更
private extractData(res: Response) {
let body = <Afdelingen[]>res.json();
return body || {}; // here you are return an object
}
になります。
private extractData(res: Response) {
let body = <Afdelingen[]>res.json().afdelingen; // return array from json file
return body || []; // also return empty array if there is no data
}
関連
-
[解決済み] UnicodeDecodeError: 'utf8' コーデックは位置3131のバイト0x80をデコードできません: 不正なスタートバイトです
-
[解決済み] 表形式のデータを持つExcelスプレッドシートをJSONに変換する最も簡単な方法は何ですか?[クローズド]
-
[解決済み] int型リスト用JSON
-
[解決済み] JSONPathで文字列によるフィルタリングを行うには?
-
[解決済み] JSONの未定義の値型
-
[解決済み】新しいPostgreSQL JSONデータ型内のフィールドを変更するにはどうすればよいですか?
-
[解決済み】Goを使ってJSONをpretty-printするにはどうすればいいですか?
-
[解決済み】JSONのキーは引用符で囲む必要があるのでしょうか?
-
[解決済み】Goの構造体をJSONに変換する
-
[解決済み】JSON用のクエリ言語はありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular: オブジェクトをサポートしているdiffが見つからない '[object Object]'
-
[解決済み] Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgForはArrayのようなIterableへのバインディングのみをサポートしています'。
-
[解決済み] JSON文字列を構造体に変換する方法
-
[解決済み】REST APIでのPUTメソッドとPATCHメソッドの使い分け 実生活でのシナリオ
-
[解決済み】Map<String, String>をPOJOに変換する。
-
[解決済み] [Solved] ファイルまたはアセンブリ 'Newtonsoft.Json' またはその依存関係の 1 つをロードできませんでした。マニフェストの定義がアセンブリの参照と一致しません。
-
[解決済み】mongodbでISODateを使った日付クエリが動作しないようです。
-
[解決済み】application/jsonとapplication/x-www-form-urlencodedの違いは何ですか?
-
[解決済み】json.Unmarshalとjson.NewDecoder.Decodeを使ったJSONのデコードについて
-
[解決済み] Angularでオブジェクトを繰り返し処理する【重複】。