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这样的位置：

  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);

    });

   }