获取 Observable 值失败答案

【问题标题】：Fail to retrieve Observable value获取 Observable 值失败
【发布时间】：2016-07-30 01:14:34
【问题描述】：

我有一个返回 Observable<Person[]> 的函数，Person 是我的模型：

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

现在在我的 component.ts 中，我正在调用这个函数，我想检索那个数组，以便可以在 html 中显示它。

返回的数组示例：

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

我有 2 个调用相同功能的按钮。

我的 component.ts 中有三个方法在单击按钮时触发，这就是我想设置一些变量来保存该 Observable 的返回值的地方。我试图做某事，但它没有工作......

这是函数：

@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; 这一行无法编译，因为我将Person[] 分配给listOneData: Observable<Person[]>;，但即使我使用 Observable 它也不起作用。

有人可以向我解释一下什么是有效的方法吗？我不想异步执行，因为我想向 html 发送一个数组，并根据我应该在哪里取消订阅的代码？

感谢分配！

【问题讨论】：

标签： javascript angularjs typescript angular angular2-routing

【解决方案1】：

听起来你想要两种不同的东西；来自可观察对象和订阅对象的数据，以便您可以取消订阅：

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

然后，无论您想取消订阅：

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

您还提到您不想异步执行；这在 JavaScript 中没有意义，因为这个是异步的；问问自己，在加载内容时你想向用户展示什么？您可能希望显示某种进度指示器，因此应该将其内置到您的视图中。

【讨论】：