Angular 抛出错误-将不显示数组

我正在学习教程，我不知道我是否误解了响应或者没有正确执行其他内容

当我执行它时，我在试图渲染数组的浏览器中不断得到一个错误

我的ionic应用程序说

<ion-item button detail lines="inset" *ngFor="let yourLeague of ( leagues | async)" >
    {{ yourLeague.title }}
</ion-item>

当我得到响应时，控制台记录上面的数组，然后打印错误

Tab1Page.html:20 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

执行此操作的离子ts如下所示

export class Tab1Page implements OnInit {

    leagues: Observable<any> =;
    constructor(private authService: AuthService, private router: Router, private http: HttpClient, private storage: Storage) {}
    ngOnInit() {
       this.leagues = this.http.get('https://swapi.co/api/films');
       this.leagues.subscribe(data => {
           console.log('my data: ', data);
       });
    }
}

---

端点返回一个JSONObject。您需要在*ngFor的JSONObject中使用结果数组。

使用此代码

---

*ngFor=let yourleagues.results | async

我将代码更改为下面的代码，但仍然没有任何结果。我错过了{{yourLeague.title}``在返回的数据JSONObject中使用result属性。联赛结果。

export class Tab1Page implements OnInit {

    leagues: Observable<any> =;
    constructor(private authService: AuthService, private router: Router, private http: HttpClient, private storage: Storage) {}
    ngOnInit() {
       this.leagues = this.http.get('https://swapi.co/api/films');
       this.leagues.subscribe(data => {
           console.log('my data: ', data);
       });
    }
}