mysurveys.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
constructor(private http:HttpClient) { }
getSurveys(): Observable<isurvey[]>{
var url = 'http://localhost/serversideapp/index';
return this.http.get<isurvey[]>(url);
}
}
export interface isurvey{
id: string;
title: string;
}
app.component.ts
import { Component,OnInit } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
public surveys:any = [];
constructor(private surveySrv:MyserviceService){}
ngOnInit(){
this.surveys =this.surveySrv.getSurveys();
}
}
app.component. html
<div class="survey" *ngFor="let survey of surveys">
<h1>{{survey.id}}</h1>
<p>{{survey.title}}</p>
</div>
<p>{{surveys | json}}</p>
возвращается следующее
{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} }
с сообщением об ошибке в консоли, как показано ниже
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngDoCheck (common.js:4406)
at callHook (core.js:4730)
at callHooks (core.js:4690)
at executeInitAndCheckHooks (core.js:4630)
at selectIndexInternal (core.js:9748)
at Module.ɵɵadvance (core.js:9709)
at AppComponent_Template (app.component.html:6)
at executeTemplate (core.js:12156)
at refreshView (core.js:11995)
at refreshComponent (core.js:13445)