Question

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

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

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

返回示例的数组：

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

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

我的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＆lt;＆gt;它起作用了。

有人可以向我解释一下这是一种有效的方法吗？我不想这样做异步因为我想发送一个数组到html，并根据代码我应该取消订阅？

感谢分配！

Answer 1

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

@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中没有意义，因为是异步;问问自己，在内容加载时你想向用户展示什么？您可能希望显示某种进度指示器，因此应将其内置到视图中。

无法检索Observable值

1 个答案: