无法获取可观察值

Question

I have aa function that returns an Observable<Person[]> , Person is my model:

export interface Person {
  id: string;
  age: number;
}

Now in my component.ts im calling this function and I want to retrieve that array so I can display it in the html.

the array that comes back example:

[{"id":"13434 1","age":21},{"id":"34334 1","age":27}]

I have 2 buttons that call the same function.

I have three methods in my component.ts that triggered when that buttons where clicked, and this is where I want to set some variable to hold the returned value of that Observable. I'v tried to do something but it didnt work...

this are the functions:

@Injectable()
export class MyCmp implements OnInit {

  listOneData: Observable<Person[]>;
  listTwoData: Observable<Animal[]>;

  showListOne = false;
  showListTwo = false;

  constructor(private _myService: MyService) {
  };

  public showListOneData(): void {
    this.showListOne = true;
    this.showListTwo = false;
    this._myService.getListOneData().subscribe(res => {
      this.listOneData = res;
    })
  }

  public showListTwo(): void {
    this.showListTwo = true;
    this.showListOne = false;
    this._myService.getListTwoData().subscribe(res => {
      this.listTwoData = res;
    })
  }
}

this.listTwoData = res; this line does not compile, its because im assigning Person[] to listOneData: Observable<Person[]>; , but even if I take of the Observable<> it dosent work.

Can someone please explain to me what woill be an efficiant way to do it? I dont want to do it async cause I want to send an array to the html, and base on the code where should I do unsubscribe?

thanks allot!

Answer 1

Sounds like you want two different things; data from the observable and a subscription object so you can unsubscribe:

@Injectable()
export class MyCmp implements OnInit {

  listOneData: Person[];
  listTwoData: Animal[];

  listOneSubscription: Subscription;    
  listTwoSubscription: Subscription;

  showListOne = false;
  showListTwo = false;

  constructor(private _myService: MyService) {
  };

  public showListOneData(): void {
    this.listOneSubscription = this._myService.getListOneData().subscribe(res => {
      this.showListOne = true;
      this.showListTwo = false;
      this.listOneData = res;
    })
  }

  public showListTwo(): void {
    this.listTwoSubscription = this._myService.getListTwoData().subscribe(res => {
      this.showListTwo = true;
      this.showListOne = false;
      this.listTwoData = res;
    })
  }
}

Then, wherever you're wanting to unsubscribe:

this.listOneSubscription && this.listOneSubscription.unsubscribe();
this.listTwoSubscription && this.listTwoSubscription.unsubscribe();

You also mentioned you don't want to do it async; that doesn't make sense in JavaScript since this is asynchronous; ask yourself, what do you want to show to the user while the content is loading? You probably want to show some sort of progress indicator, so that should be built into your view.