Angular http simulation-CodePudding

i am trying to simulate http request call for my ag grid rowData.

this is data service class

@Injectable({
    providedIn: 'root',
})

export class KoeficijentiZaVodneLinijeData {

    getData(): Observable<KoeficijentiZaVodneLinijeModel[]>{
        return new Observable<KoeficijentiZaVodneLinijeModel[]>((observer) => {
            of(new KoeficijentiZaVodneLinijeModel(0.00, 0.25)),
            of(new KoeficijentiZaVodneLinijeModel(0.25, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(0.50, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(0.75, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(1.00, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(1.25, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(1.50, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(1.75, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(2.00, 1.25)),
            of(new KoeficijentiZaVodneLinijeModel(3.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(4.00, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(5.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(6.00, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(7.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(8.00, 1.50)),
            of(new KoeficijentiZaVodneLinijeModel(4.50, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(9.00, 0.75)),
            of(new KoeficijentiZaVodneLinijeModel(9.25, 1.00)),
            of(new KoeficijentiZaVodneLinijeModel(9.50, 0.50)),
            of(new KoeficijentiZaVodneLinijeModel(9.75, 1.00)),
            of(new KoeficijentiZaVodneLinijeModel(10.00, 0.25))
        });
    }
}

this is where am i calling it

export class KoeficijentiZaVodneLinijeComponent implements OnInit {

  columnDefs: ColDef[]=[
    {field: 'r'},
    {field: 'y'},
    {field: 'x'},
    {field: 'xixi'},
    {field: 'koef'},
    {field: 'proizvod'},
    {field: 'deltaY'},
    {field: 'delta4y'},
    {field: 'proizvodSum'},
  ]

  rowData : Observable<KoeficijentiZaVodneLinijeModel[]>;
  constructor(private koeficijentiDataService: KoeficijentiZaVodneLinijeData) { }

  ngOnInit(): void {
    this.rowData = this.koeficijentiDataService.getData();
     
  }

}

i was following ag grid tutorial and at some point they switched the type of rowData to observable. My app will work without http request and all the data will be provided by me. i am not sure if this is the right way so please can you help

CodePudding user response：

lets dive into the patterns you are using:

the first one is new Observable(observer => {/* observable logic */}). this "logic" will be executed just at the moment of subscription. so observer.next(10) will emit event 10. observer.complete() will complete the source and hopefully free the resources. with his observable constructor you can create your own observables for example:

new Observable(observer => {
  observer.next(10);
  setTimeout(() => observer.next(20), 1000);
  setTimeout(() => observer.next(30), 2000);
});

this observable will emit 10 at the moment of subscription, then after a second it will emit 20 and after another second - 30; but in vast majority of cases new Observable(...) is bad practice, because there is already an operator that does that.

then you are using of(data) - it creates an observables that just emits data. so the correct usage would be of([item1, item2, item3, ...]).

but I would improve that thing a bit (considering that there will be a delay, when you switch to a real data. final implementation will look like this:


    getData(): Observable<KoeficijentiZaVodneLinijeModel[]>{
        return of([
            new KoeficijentiZaVodneLinijeModel(0.00, 0.25),
            new Koef....
        ]).pipe(delay(800)); // lets assume your mock API responds in 800 msec
    }

CodePudding user response：

First of all, if you want to provide only static data there is no need to (sense in) using an observable.

On to the problem at hand: What you are trying to do is create an observable that holds an array of your data.

What you did was you created a new observable (return new Observable(observer => {...});) that does not emit anything. For it to emit anything you would need to call observer.next(<your data>).

Instead you call of(<one element of the desired array>) which in turn creates an observable emitting that one value, but these observables are no further used to emit values in your "outter" observable.

A working solution could be

return new Observable (observer => {
    observer.next([<your data here>]);
    observer.complete(); // after emitting the values, your observable is finished
});

This is correct but quite cumbersome. Instead the of method you already used is specifically suited for this task. of returns an Observable that emits the arguments [...] and then completes. Thus what you want to do is this:

return of([<your data here>]);