来自可观察对象的数据始终未定义

Question

我有一个服务 return 一个对象数组的可观察对象

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) 我会得到值

Answer 1

您不得使用相等运算符 == 而不是 = 赋值运算符。

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

Answer 2

我假设您希望 allFruits 成为一个数组而不是一个 Observable。那是对的吗？我还稍微更改了订阅 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 与异步管道一起使用。

Answer 3

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

但是这里 first() 运算符将 return 第一个不是 Array 类型的对象，你不应该使用 Array 类型或者你应该删除 first() pipe

来自可观察对象的数据始终未定义

Data from the observable is always undefined

observable

rxjs

typescript

angular