来自 observable 的数据总是未定义的答案

【问题标题】：Data from the observable is always undefined来自 observable 的数据总是未定义的
【发布时间】：2021-02-20 01:23:33
【问题描述】：

我有一个服务，它返回一个对象数组的 observables

allFruits: Fruit[] = [
    {
      id: "1",
      name: "fruit 1"
    },
    {
      id: "2",
      name: "fruit 2"
    },
    {
      id: "3",
      name: "fruit 3"
    },
    {
      id: "4",
      name: "fruit 4"
    }
  ];

function getFruits {
 return of(allFruits);
}

组件

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.allFruits == results;
      });

this.allFruits 始终未定义，并且其中没有任何值。如果我执行 console.log(results) 我会得到值

【问题讨论】：

标签： angular typescript rxjs observable

【解决方案1】：

我假设您希望 allFruits 成为一个数组而不是一个 Observable。那是对的吗？我还稍微更改了 subscribe lambda 函数。

allFruits: Fruit[];
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(results => {
        this.allFruits == results;
      });

如果您的意图是将此服务与async 管道结合使用，您可以执行以下操作：

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.allFruits = this.fruitService
       .getFruits()
       .pipe(first());

然后，您可以在模板中将 allFruits 与异步管道一起使用。

【讨论】：

您在订阅函数中收到的result 变量中的数据不是可观察的。你实际上在那里得到了一个 Array of Fruit。
你可以使用这样的长度。要使用异步管道，您需要一个 Observable。我更新了我的答案。
如果您的 Observable 在它发出的第一个值之后立即完成（或者如果您使用“第一个”运算符）我会说任何一种方式都可以。但是如果你的 observable 没有完成并且可能会发出更多的值，那么异步管道是一个很好的方式来将它连接到你的模板中，因为它会在组件被销毁时自动为你取消订阅。
没有。如果您使用异步管道，则无需订阅。您将 observable 传递给异步管道，它会为您订阅..
this.fruitService,getFruits() 返回一个 observable。 this.fruitService,getFruits().subscribe(results => { this.allFruits == results) 返回一个订阅对象。每次 getFruits observable 发出一个值时，此订阅将使用水果数组更新 this.allFruits 变量。当然，您问题中的 getFruits 可观察对象只会发出一次并在之后立即完成。您的问题的直接答案是没有返回可观察的。 this.allFruits 变量将包含水果数组。

【解决方案2】：

您不能使用相等运算符== 代替= 赋值运算符。

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.allFruits = results;
      });

【讨论】：

【解决方案3】：

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.allFruits = results;
      });

但是这里 first() 操作符将返回第一个不是 Array 类型的 obj 或者你不应该使用 Array 类型或者你应该删除 first() 管道

【讨论】：