RxJS indexOfQuizId 在控制台中未定义

Question

我已经开始重构我的代码以使用 Angular Observables 并且我正在使用 Observable 'of' 作为 quizzes$ 数组，但我一直坚持让 indexOfQuizId 工作，特别是与查找索引。我在控制台中得到 this.indexOfQuizId 的未定义值，不确定我做错了什么......请你看看我下面的代码（在 getIndexOfQuizId() 中）并帮助让它工作。谢谢！

在quiz.ts中： export const getQuizzes$: Observable<Quiz[]> = of([quiz data inside array]);

在quiz.service.ts中：

export class QuizService {
  quizzes$: Observable<Quiz[]>;
  ...

  constructor(...) {
    this.quizzes$ = getQuizzes$;
    ...
  }

  getQuizzes(): Observable<Quiz[]> {
    return this.quizzes$;
  }

  getIndexOfQuizId() {
    const index = this.getQuizzes().pipe(map(quizzes => {
        this.indexOfQuizId = quizzes.findIndex((elem) => elem.quizId === this.quizId);
      })).subscribe(x => {
        console.log(x);
        console.log('IOQID: ', this.indexOfQuizId);
      });
  }

在 quiz.component.html 中，我使用 this.indexOfQuizId 访问 quizzes$ 数组对象，如下所示：

this.totalQuestions = this.quizzes$[this.quizService.indexOfQuizId].questions.length;

Answer 1

你有一个未定义的这一行console.log('IOQID: ', this.indexOfQuizId);，这是非常正确的。

如您所知，subscribe 是异步的，这意味着在您将任何值设置为 this.indexOfQuizId 之前调用下一行 (console.log('IOQID: ', this.indexOfQuizId);)，因为 [=14] =] 最终会被调用。

尝试像这样将 console.log 移动到 subscribe 中：

  getIndexOfQuizId() {
    const index = this.getQuizzes().pipe(map(quizzes => {
      this.indexOfQuizId = quizzes.findIndex(function(elem, i, obs) { return elem => elem.quizId === this.quizId; });
    })).subscribe(x => {
       console.log(x);
       console.log('IOQID: ', this.indexOfQuizId);
    });
   }

RxJS indexOfQuizId 在控制台中未定义

RxJS indexOfQuizId undefined in console

javascript

observable

rxjs

angular