RxJS indexOfQuizId 在控制台中未定义答案

【问题标题】：RxJS indexOfQuizId undefined in consoleRxJS indexOfQuizId 在控制台中未定义
【发布时间】：2020-09-18 12:31:24
【问题描述】：

我已经开始重构我的代码以使用 Angular Observables，并且我将 Observable 'of' 用于 quizzes$ 数组，但我一直坚持让 indexOfQuizId 工作，特别是使用 findIndex。我在控制台中得到 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;

【问题讨论】：

在回调中使用箭头函数将this关键字引用到类成员变量。试试：quizzes.findIndex((elem, i, obs) => elem.quizId === this.quizId).
谢谢，我编辑了上面的代码以使用箭头函数。
this.quizId 的值未定义。在构造函数中我有 this.quizId = this.activatedRoute.snapshot.params['quizId'];我的路线看起来像： { path: 'question/:quizId/:questionIndex', component: QuizComponent },

标签： javascript angular rxjs observable

【解决方案1】：

您对此行有一个未定义的console.log('IOQID: ', this.indexOfQuizId);，这是完全正确的。

您可能知道，subscribe 是异步的，这意味着在您向 this.indexOfQuizId 设置任何值之前调用下一行 (console.log('IOQID: ', 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);
    });
   }

【讨论】：

谢谢，但无论我尝试哪个测验，我现在在控制台中的 IOQID 值为 0。
this.quizId 的值是多少？也许它总是 0 或者你的 quizzes 数组没有你正在检查的 id 或者 quizzes 数组是空的
我检查了，this.quizId 在控制台中为空。我在构造函数中定义了 this.quizId this.quizId = this.activatedRoute.snapshot.paramMap.get('quizId');
你把网址称为localhost:4221/quizz?quizId=123 ?
我现在得到的 IOQID 值为 -1。我将代码更改为使用箭头函数： const index = this.getQuizzes().pipe(map(quizzes => { this.indexOfQuizId = quizzes.findIndex((elem, i, obs) => elem.quizId === this .quizId ); })).subscribe(x => { console.log(x); console.log('IOQID: ', this.indexOfQuizId); }); console.log('quizId: ', this.quizId);