JSON 객체를 반환하는 API에서 Angular 8을 사용하여 데이터를 검색하려면 어떻게해야합니까?

Donned by Donnie

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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관