Struggling to grasp the concepts of Angular and TypeScript for the first time, particularly puzzled by why this code snippet is not considered valid!
http.service.ts
export class HttpService {
constructor(private http: HttpClient) { }
getBeer() {
return this.http.get('https://api.openbrewerydb.org/breweries')
}
}
The API returns an object.
The component it's being used in:
export class ListComponent implements OnInit {
brews: Object;
constructor(private _http: HttpService) { }
ngOnInit() {
this._http.getBeer().subscribe(data => {
this.brews = data
console.log(this.brews);
}
)
}
}
An error arises with the line:
brews: Object;
The error message states:
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?
I have attempted:
brews: any;
and
brews: Object[] = [];
However, neither solution seems to resolve the issue.
Could someone elucidate on where my mistake lies?
Given that the API returns an object, why am I unable to simply use:
brews: Object;
The template it's intended for:
<h1>Breweries</h1>
<ul *ngIf="brews">
<li *ngFor="let brew of brews">
<p class="name">{{ brew.name }}</p>
<p class="country">{{ brew.country }}</p>
<a class="site" href="{{ brew.website_url }}">site</a>
</li>
</ul>