title: How to use Angular ngFor with Observable
body: <p>With <code>Book</code> class defined as:</p>
  <pre><code>class Book {
     id: number;
     name: string;
     constructor(id: number, name: string) { 
       this.id = id;
       this.name = name;
    }
  }
  </code></pre>
  <p>I go ahead and create <code>Observable</code> object <code>books$</code>:</p>
  <pre><code>const book1: Book = new Book(1, &quot;Title 1&quot;);
  const book2: Book = new Book(2, &quot;Title 2&quot;);
  function booklist(observer) {
    observer.next(book1);
    observer.next(book2);
    observer.complete();
    return {unsubscribe() {}};
  }
  this.books$ = new Observable(booklist);
  </code></pre>
  <p>Checking it with:</p>
  <pre><code>this.books$.subscribe(each =&gt; console.log(each));
  </code></pre>
  <p>prints:</p>
  <pre><code>Book {id: 1, name: &quot;Title 1&quot;}
  Book {id: 2, name: &quot;Title 2&quot;} 
  </code></pre>
  <p>But using this observable with <code>ngFor</code> in the html template:</p>
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor=&quot;let book of books$ | async&quot; &gt;
      Id: {{book.id}}, Name: {{book.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>raises the <code>ERROR</code>:</p>
  <pre><code>   Error: Cannot find a differ supporting object '[object Object]' of type 'Title 2'. NgFor only supports binding to Iterables such as Arrays.
  </code></pre>
  <p>How to solve this problem? Here is the link to <a href="https://stackblitz.com/edit/angular-ivy-isebs7?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">Stackblitz</a> project:</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-isebs7?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-isebs7?file=src%2Fapp%2Fapp.component.ts</a></p>