CODEWITHSUNDEEP
angularionic-framework
random_user_0891
random_user_0891

Reputation: 2051

ionic and angular function not returning value

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

Upvotes: 3

Views: 288

Answers (1)

Michael Kang
Michael Kang

Reputation: 52847

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
    ];

  }  
}

Upvotes: 3

Related Questions