ionic and angular function not returning value

Question

I can't get the addReservation function to return any value.

in reservations.page.ts it returns an empty array when I log to the console.

userReservations: Reservation[];
private resSubscription: Subscription;
constructor(private resService: ReservationsService) { }

      ngOnInit() {
        this.resSubscription =
        this.resService.reservations.subscribe(reservations => {
          console.log('reservations...', reservations);
          this.userReservations = reservations;
        });
      }

below is reservations.service.ts I can't get the reservations in the return statement to log any value so I'm guessing the issue may be there.

export class ReservationsService {
  private _reservations = new BehaviorSubject<Reservation[]>([]);

  constructor(private authentication: AuthenticationService) { }

  // return the parking space reservations
  get reservations() {
    return this._reservations.asObservable();
  }

  // create a reservation
  addReservation(
    parkingSpaceId: string,
    parkingSpaceTitle: string,
    url: string,
    firstName: string,
    lastName: string,
    reservedDayCount: number,
    reservedFrom: Date,
    reservedTo: Date
  ) {
    const newReservation = new Reservation(
      Math.random().toString(),
      parkingSpaceId,
      this.authentication.userId,
      parkingSpaceTitle,
      url,
      firstName,
      lastName,
      reservedDayCount,
      reservedFrom,
      reservedTo
    );
    return this.reservations.pipe(
      take(1),
      tap(reservations => {
        console.log('return reservations...', reservations);
        this._reservations.next(reservations.concat(newReservation));
      })
    );
  }  
}

I would have to do this.resService.reservations in reservations.page.ts right? using this.reservations I get property does not exist. — random_user_0891
– random_user_0891, Commented Apr 27, 2019 at 2:56

Michael Kang · Accepted Answer · 2019-04-28 21:02:37Z

3

The problem is in your addReservation function.

The way you have it, the tap will only execute if addReservation is subscribed to... which is wrong because that will result in an infinite loop.

The following link shows how to use Rxjs exclusively to manage state within an Angular service, without having to store any local copies of the data:

https://dev.to/avatsaev/simple-state-management-in-angular-with-only-services-and-rxjs-41p8

This is how you would apply the pattern to your ReservationsService:

export class ReservationsService {
   get reservations(): Reservation[] {
        return this._reservations.getValue();
   }

   private set reservations(val: Reservation[]) {
     this._reservations.next(val);
   }

   private _reservations = new BehaviorSubject<Reservation[]>([]);

   constructor(private authentication: AuthenticationService) { }

  // return the parking space reservations
  get reservations$() {
    return this._reservations.asObservable();
  }

  // create a reservation
  addReservation(
    parkingSpaceId: string,
    parkingSpaceTitle: string,
    url: string,
    firstName: string,
    lastName: string,
    reservedDayCount: number,
    reservedFrom: Date,
    reservedTo: Date
  ) {
    const newReservation = new Reservation(
      Math.random().toString(),
      parkingSpaceId,
      this.authentication.userId,
      parkingSpaceTitle,
      url,
      firstName,
      lastName,
      reservedDayCount,
      reservedFrom,
      reservedTo
    );
    this.reservations = [
      ...this.reservations, 
      newReservation
    ];

  }  
}

edited Apr 28, 2019 at 21:02

answered Apr 27, 2019 at 3:01

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

random_user_0891 Over a year ago

if I do this._reservations.next(this.reservations.concat(newReservation)); I get Property 'concat' does not exist on type 'Observable<Reservation[]>'

Michael Kang Over a year ago

right... you need to store a local reference to your array

random_user_0891 Over a year ago

can you please give an example?

Collectives™ on Stack Overflow

ionic and angular function not returning value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related