Angular ngFor throws error - won't display array

I'm following Devdactic's http tutorial and I can't tell if I'm misunderstanding the response or not executing something else correctly.

When I execute it, I keep getting an error within the browser attempting to render the array.

My ionic app says

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

The called api responds with an array that looks like this. Pretty confident the array is ok, I see that as a common problem out there.

results: Array(7)
0: {title: "A New Hope", episode_id: 4, opening_crawl: "It is a period of civil war.
↵Rebel spaceships, st…er
↵people and restore
↵freedom to the galaxy....", director: "George Lucas", producer: "Gary Kurtz, Rick McCallum", …}
1: {title: "Attack of the Clones", episode_id: 2, opening_crawl: "There is unrest in the Galactic
↵Senate. Several t…THE REPUBLIC
↵to assist the overwhelmed
↵Jedi....", director: "George Lucas", producer: "Rick McCallum", …}
2: {title: "The Phantom Menace", episode_id: 1, opening_crawl: "Turmoil has engulfed the
↵Galactic Republic. The t…ustice in the
↵galaxy, to settle the conflict....", director: "George Lucas", producer: "Rick McCallum", …}
3: {title: "Revenge of the Sith", episode_id: 3, opening_crawl: "War! The Republic is crumbling
↵under attacks by t…ate mission to rescue the
↵captive Chancellor....", director: "George Lucas", producer: "Rick McCallum", …}
4: {title: "Return of the Jedi", episode_id: 6, opening_crawl: "Luke Skywalker has returned to
↵his home planet of…
↵struggling to restore freedom
↵to the galaxy...", director: "Richard Marquand", producer: "Howard G. Kazanjian, George Lucas, Rick McCallum", …}
5: {title: "The Empire Strikes Back", episode_id: 5, opening_crawl: "It is a dark time for the
↵Rebellion. Although the… remote probes into
↵the far reaches of space....", director: "Irvin Kershner", producer: "Gary Kurtz, Rick McCallum", …}
6: {title: "The Force Awakens", episode_id: 7, opening_crawl: "Luke Skywalker has vanished.
↵In his absence, the …↵has discovered a clue to
↵Luke's whereabouts....", director: "J. J. Abrams", producer: "Kathleen Kennedy, J. J. Abrams, Bryan Burk", …}
length: 7

When I get the response, the console logs the above array and then prints the error.

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.

The ionic ts that is executing this looks like.

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);
       });
    }
}