Q:

Async Pipe Error While Using Observable in Angular 2 App

I have pagination working in my Angular 2 app but am running into an issue where I'm getting an error re: the async pipe:

Invalid argument '' for pipe 'AsyncPipe'

In the research I've done re: this error, it usually has to do with the fact that the async pipe expects an observable. This is confusing to me, because I am using an observable, so I'm not sure what the issue is. 
First, here's my relevant view code:
<tr *ngFor="let record of records | async | paginate: { id: 'stream', itemsPerPage: 15, currentPage: page, totalItems: total }">

This component is using an Input() from another component, like this:
@Input() records = [];

And here's "records" from that other component, which is an observable I'm subscribing to OnInit:
ngOnInit() {
   this.streamService.getBySection('section1')
        .subscribe(resRecordsData => this.records = resRecordsData,
        responseRecordsError => this.errorMsg = responseRecordsError);
}

What am I missing here? Do I need to explicitly declare this as type observable somewhere?

A:

Async pipe expect an observable, not the resolved data.
ngOnInit() {
   this.records = this.streamService.getByStage('section1');
}

