RxJS indexOfQuizId 在控制台中未定义

Question

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

在测验中： 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

你有一个 undefined 对于这一行console.log('IOQID: ', this.indexOfQuizId);，这是非常正确的。您可能知道，它subscribe是异步的，这意味着console.log('IOQID: ', this.indexOfQuizId);在您将任何值设置到 this.indexOfQuizId 之前调用下一行 ( )，因为map最终将调用它。尝试将 console.log 移动到subscribe这样的位置：&nbsp; getIndexOfQuizId() {&nbsp; &nbsp; const index = this.getQuizzes().pipe(map(quizzes => {&nbsp; &nbsp; &nbsp; this.indexOfQuizId = quizzes.findIndex(function(elem, i, obs) { return elem => elem.quizId === this.quizId; });&nbsp; &nbsp; })).subscribe(x => {&nbsp; &nbsp; &nbsp; &nbsp;console.log(x);&nbsp; &nbsp; &nbsp; &nbsp;console.log('IOQID: ', this.indexOfQuizId);&nbsp; &nbsp; });&nbsp; &nbsp;}