aprendiendo angular y mecanografiado por primera vez y no puedo entender por qué esto no es válido.
http.servicio.ts
export class HttpService { constructor(private http: HttpClient) { } getBeer() { return this.http.get('https://api.openbrewerydb.org/breweries') } }esa api devuelve un objeto
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); } ) } }me sale un error en la linea
brews: Object;que dice:
error TS2322: el tipo 'Objeto' no se puede asignar al tipo 'NgIterable | nulo | indefinido'. El tipo 'Objeto' es asignable a muy pocos otros tipos. ¿Querías usar el tipo 'cualquiera' en su lugar?
He intentado:
brews: any;y
brews: Object[] = [];Pero nada parece funcionar.
¿Alguien puede explicar dónde me estoy equivocando?
esa api devuelve un objeto, entonces, ¿por qué no puedo hacerlo?
brews: Object;la plantilla se utiliza para:
<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>Es una buena idea crear un tipo personalizado basado en sus data . Pero si insiste en usar el tipo anónimo, es posible que deba usar any[] para resolver el problema:
brews: any[];Y su servicio sería así:
this._http.get('https://api.openbrewerydb.org/breweries').subscribe(data => { this.brews = data as any[] console.log(this.brews); }Aquí hay una muestra de trabajo: StackBlitz
es una mala idea nombrar su servicio en el espacio de nombres restringido. httpservice no es un buen nombre para usar y podría generar algún problema extraño más adelante.
debe usar un sujeto de comportamiento que le permita compartir el objeto como un observable de todos los componentes.
Servicio
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) }) }en tu componente
constructor(beer:BeerService) {} ngOnInit(){ this.beer.beer$.subscribe((beer)=>{ this.beer = beer}) }Puedes leer sobre temas de comportamiento aquí. https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject