Quiero mostrar la rueda ngx usando api pero tengo problemas para mostrar los datos. Aquí mi servicio:
import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class RestServices { restEndpoint:string = 'https://gorest.co.in/public/v2/users' constructor( private httpClient: HttpClient ) { } async getServiceId() { const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', }) } return this.httpClient.get<any[]>(this.restEndpoint, httpOptions) }Aquí mi componente:
private subscription: Subscription | undefined; items: any = [] ngOnInit(): void { this.subscription = this._restService.getServices() .subscribe((res:any)=>{ let item = res this.items = item.map((v:any) => ({ text: v.name, id: v.id, textFillStyle: "white", textFontSize: "16" })); }) } ngOnDestroy(): void { this.subscription?.unsubscribe() }Aquí para html
<ngx-wheel #wheel [width]='350' [height]='350' [spinDuration]='8' [disableSpinOnClick]='true' [items]='items' [innerRadius]='10' [spinAmount]='10' [textOrientation]='textOrientation' [textAlignment]='textAlignment' pointerStrokeColor='black' pointerFillColor='white' [idToLandOn]='idToLandOn' (onSpinStart)='before()' (onSpinComplete)='after()'>Espero encontrar la respuesta aquí. Gracias
Primero, no necesita await, async y ,toPromise()... elimínelos y simplemente regrese
return this.httpClient.get<any[]>(this.restEndpoint, httpOptions);dentro de su componente, debe usar su constructor solo para la inicialización de datos simple: si tiene que consumir una API de descanso, es un mejor enfoque mover esa pieza de código dentro del método ngOnInit:
items: any[] = [] constructor(private restService: RestService){}//dependency injection ngOnInit(): void { this.restService.getServiceId().subscribe(response => { console.log('response success: ', response); this.items = response; //this may change a little based on your api console.log('items: ', this.items); }, errorLog => { console.log('response error: ', errorLog) }); }La solución anterior es válida, puede enriquecerla agregando *ngIf="isLoaded" en su elemento html y establecer en verdadero el método de suscripción isLoaded INSIDE. pero si lo prefieres puedes hacer lo siguiente en el component.ts
items$: Observable<any> = EMPTY; constructor(private restService: RestService){}//dependency injection ngOnInit(): void { this.items$ = this.restService.getServiceId(); }entonces, en tu html cambiaría a lo siguiente:
<ngx-wheel #wheel *ngIf="items$ | async as items" [width]='350' [height]='350' [spinDuration]='8' [disableSpinOnClick]='true' [items]='items' [innerRadius]='10' [spinAmount]='10' [textOrientation]='textOrientation' [textAlignment]='textAlignment' pointerStrokeColor='black' pointerFillColor='white' [idToLandOn]='idToLandOn' (onSpinStart)='before()' (onSpinComplete)='after()'>