Question

0

84

Vistas

How to display data from client service in ngx-wheel Angular

I want to display the ngx-wheel using api but I'm having trouble displaying the data. Here my Service :

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)
}

Here my Component :

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()
}

Here for 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()'>

I hope to find the answer here. Thank you

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-30T23:13:53.622Z

First, you don't need await, async and ,toPromise()... remove them and simply return

return this.httpClient.get<any[]>(this.restEndpoint, httpOptions);

inside your component you should use your constructor only for simple data initialization: if you have to consume a rest api it is a better approach to move that piece of code inside the ngOnInit method:

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)
 });
}

The above solution is valid, you can enrich it by adding a *ngIf="isLoaded" on your html element and set to true the isLoaded INSIDE subscribe method. but if you prefer you can do the following in the component.ts

items$: Observable<any> = EMPTY;
constructor(private restService: RestService){}//dependency injection
ngOnInit(): void {
 this.items$ = this.restService.getServiceId();
}

then, in your html it would change to the following:

<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()'>