learning angular and typescript for the first time and cannot understand why this is not valid!
http.service.ts
export class HttpService {
constructor(private http: HttpClient) { }
getBeer() {
return this.http.get('https://api.openbrewerydb.org/breweries')
}
}
that api returns an object
the component its 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);
}
)
}
}
im getting an error in the line
brews: Object;
which says:
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've tried:
brews: any;
and
brews: Object[] = [];
but nothing seems to work.
can someone explain where I am going wrong?
that api returns an object, so why cant I do
brews: Object;
the template its being used 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>
It is good idea create a custom type based on your data. But if you insist on using anonymous type you may need to use any[] type to solve the problem:
brews: any[];
And your service would be like this:
this._http.get('https://api.openbrewerydb.org/breweries').subscribe(data => {
this.brews = data as any[]
console.log(this.brews);
}
Here is working sample: StackBlitz
it's a bad idea to name your service in the restricted name space. httpservice is not a good name to use and could lead to some weird problem later.
you should use a behavior subject which allows you to share the object as an observable from all components.
service
export class BeerService {
private beer = new BehaviorSubject<any>({});
public beer$ = this.beer.asObservable();
getBeer(){
this.http.get('https://api.openbrewerydb.org/breweries').pipe(map((res) => (res = res))).subscribe((sub) => {
sub = sub;
// set beer object next
this.beer.next(sub)
// , take(2)
})
}
on your component
constructor(beer:BeerService) {}
ngOnInit(){
this.beer.beer$.subscribe((beer)=>{
this.beer = beer})
}
you can read about behavior subjects here. https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject