title: Type 'Object' is not assignable to type 'NgIterable<any> | null | undefined'. in Angular 11
body: <p>learning angular and typescript for the first time and cannot understand why this is not valid!</p>
  <p>http.service.ts</p>
  <pre><code>export class HttpService {
  
  
    constructor(private http: HttpClient) { }
  
    getBeer() {
      return this.http.get('https://api.openbrewerydb.org/breweries')
    }
  }
  </code></pre>
  <p>that api returns an object</p>
  <pre><code>the component its being used in: 
  
  
  export class ListComponent implements OnInit {
  
    brews: Object;
  
    constructor(private _http: HttpService) { }
  
    ngOnInit() {
      this._http.getBeer().subscribe(data =&gt; {
        this.brews = data
        console.log(this.brews);
      }
    )
    }
  
  }
  </code></pre>
  <p>im getting an error in the line</p>
  <pre><code>brews: Object;
  </code></pre>
  <p>which says:</p>
  <p>error TS2322: Type 'Object' is not assignable to type 'NgIterable | null | undefined'.
  The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?</p>
  <p>i've tried:</p>
  <pre><code>brews: any;
  </code></pre>
  <p>and</p>
  <pre><code>brews: Object[] = [];
  </code></pre>
  <p>but nothing seems to work.</p>
  <p>can someone explain where I am going wrong?</p>
  <p>that api returns an object, so why cant I  do</p>
  <pre><code>brews: Object; 
  </code></pre>
  <p>the template its being used for:</p>
  <pre><code>&lt;h1&gt;Breweries&lt;/h1&gt;
  
  &lt;ul *ngIf=&quot;brews&quot;&gt;
    &lt;li *ngFor=&quot;let brew of brews&quot;&gt;
      &lt;p class=&quot;name&quot;&gt;{{ brew.name }}&lt;/p&gt;
      &lt;p class=&quot;country&quot;&gt;{{ brew.country }}&lt;/p&gt;
      &lt;a class=&quot;site&quot; href=&quot;{{ brew.website_url }}&quot;&gt;site&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>