title: Getting error "TS2571: Object is of type 'unknown'" when trying to display object properties from a Firebase observable
body: <p>I'm following along a tutorial that's at least 7 versions of Angular old. I anticipated having to work around deprecated code but I cannot find a recent example of how to do the same thing. I simply want to display the properties of the json object contained in the Observable.</p>
  <p>Here is the code for <strong>app.component.ts</strong>:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AngularFireDatabase } from '@angular/fire/database';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      author$;
  
      constructor(private db: AngularFireDatabase) {
          this.author$ = db.object('/authors/1').valueChanges();
          
      }
  
  }
  </code></pre>
  <p>In the markup,</p>
  <pre><code>&lt;p&gt;
      {{ (author$ | async).name }}
  &lt;/p&gt;
  </code></pre>
  <p>will produce the error in the title. If, however, I instead write:</p>
  <pre><code>&lt;p&gt;
      {{ author$ | async | json }}
  &lt;/p&gt;
  </code></pre>
  <p>the webpage will display the object completely:</p>
  <blockquote>
  <p>{ &quot;isPremium&quot;: true, &quot;name&quot;: &quot;Name Name&quot;, &quot;students&quot;: 100 }</p>
  </blockquote>
  <p>So how can I use interpolation to render specific content? I should probably also say that the tutorial was about using the &quot;as&quot; keyword to abbreviate this code to something like this:</p>
  <pre><code>&lt;ul *ngIf=&quot;author$ | async as author&quot;&gt;
      &lt;li&gt;{{ author.name }}&lt;/li&gt;
      &lt;li&gt;{{ author.isPremium }}&lt;/li&gt;
      &lt;li&gt;{{ author.students }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>