HttpClientModule 가져 오기를 완료 하고 앱 모듈에 등록했습니다. 그러나 API에서 요청하면 콘솔에 오류가 발생합니다.
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
아래는 내 app.service.ts입니다.
import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'
import {mydata} from './app'
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AppService {
private url:string="https://allsportsapi.com/api/football/?&met=Videos&eventId=76387&APIkey=e09665167a2ccf5f2c7d15527c78d5d209eff826dea5b4dd0bdbc65b258be8de";
constructor(private http : HttpClient) { }
getData():Observable<mydata[]>
{
return this.http.get<mydata[]>(this.url);
}
}
**Below is the code for the app.component.ts**
import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'movie';
info:any[];
constructor(private service:AppService){}
ngOnInit()
{
this.service.getData().subscribe(data=>{this.info = data})
}
}
**Below is the app.component.html**
<h1>Welcome To {{title}} stream</h1>
<table>
<td *ngFor="let video of info ">
<tr>{{video.result[0] | json}}</tr>
<tr>{{video.result[1] | json}}</tr>
</td>
</table>
**This is my interface**
export interface mydata
{
success:number,
result:string[]
}
**This is what the api returns**
{
"success": 1,
"result": [
{
"video_title": "Goal - 1:0 - 12'\n Poli A., Bologna",
"video_url": "https://cc.sporttube.com/embed/leMCCCG/no-preload"
},
{
"video_title": "Goal - 1:1 - 38'\n Babacar K., Sassuolo",
"video_url": "https://cc.sporttube.com/embed/TeMCCCG/no-preload"
},
{
"video_title": "Yellow Card - 86'\n Goldaniga E., Sassuolo",
"video_url": "https://cc.sporttube.com/embed/EeMCCCG/no-preload"
},
{
"video_title": "Goal - 2:1 - 88'\n Pulgar E., Bologna",
"video_url": "https://cc.sporttube.com/embed/FeMCCCG/no-preload"
},
{
"video_title": "Highlights",
"video_url": "https://streamable.com/e/0d35p"
}
]
}
API JSON 응답과 일치하는 .TS 인터페이스를 만드는 것이 좋습니다.
그런 다음 this.service.getData()
이전에 만든 .TS 인터페이스의 배열을 수신하도록 메서드를 업데이트합니다 .
마지막으로, 업데이트 info:any[];
에info:YourInterface[];
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다