Problem with consuming an Observable in Angular 6

Question

I have a simple component structure where I have an angular component called gameplay, inside which is a child component called question-box. The objective is to fetch a simple string via a backend service in gameplay (which works fine), and pass this string to the question-box to be displayed (which doesn't work).

Here is my code:

gameplay.component.ts:

import { Component, OnInit, OnChanges } from '@angular/core';
import { QuestionsService } from '../services/questions.service';

@Component({
  selector: 'app-gameplay',
  templateUrl: './gameplay.component.html',
  styleUrls: ['./gameplay.component.css'],
})
export class GameplayComponent implements OnInit {

  constructor(private qService: QuestionsService) {

  }

  currentQuestion: string;

  ngOnInit() {
    this.qService.getQuestions().subscribe({
      next(data) {
        this.currentQuestion = data[0].question;
        console.log(this.currentQuestion); //logs correctly
      },
      complete() { console.log('Done')},
      error() { console.log('Error')},

    })
  }
}

gameplay.component.html:

<app-question-box [question]="currentQuestion"></app-question-box>

question-box.component.ts

 import { Component, OnInit, Input, OnChanges, SimpleChange } from '@angular/core';

@Component({
  selector: 'app-question-box',
  templateUrl: './question-box.component.html',
  styleUrls: ['./question-box.component.css']
})
export class QuestionBoxComponent implements OnInit {

  @Input() question: string;

  constructor() {
  }

  ngOnInit() {
  }
}

question-box.component.html

<mat-card md-colors="{background: 'orange'}">
  <mat-card-content>
    <p>{{question}} </p>
  </mat-card-content>

</mat-card>

I tried using the async pipe in the template, but it didn't work. I expect to see the string I got in next() in the child's <p>; but I don't see anything. The string gets logged correctly on the console, however.

Any help would be appreciated. Please let me know if I left out some information needed to find a solution. Thanks.

you need to remove the brackets juste after subscribe : subscribe(fn, fn, fn) — Jscti
– Jscti, Commented Oct 2, 2018 at 8:42
@Cétia: Looks like that's just a syntax difference. angular.io/guide/observables. Anyway, like I said, the next method seems to work because I see the console log correctly. — Snowman
– Snowman, Commented Oct 2, 2018 at 8:50
@Marcel: Thanks it worked. If you or Celia post it as an answer I'd be happy to accept. Lesson learned. When in doubt, use arrow functions. No this issues. — Snowman
– Snowman, Commented Oct 2, 2018 at 10:06

Marcel · Accepted Answer · 2018-10-02 14:21:00Z

1

According to my comment:

If you pass the callbacks this way, the this inside the callbacks is the function, not the component itself.

Changing to arrow functions will solve the problem:

this.qService.getQuestions().subscribe(
      data => this.currentQuestion = data[0].question,
      error => console.log('Error'),
      () => console.log('Done')
);

answered Oct 2, 2018 at 14:21

Marcel

1621 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matchifang · Accepted Answer · 2018-10-02 14:04:02Z

0

Can you add an ngOnChanges to the child component to check if the change has been propagated... something like this:

ngOnInit(change: any) {
    console.log(change['question']);
}

Also, try changing the ngOnInit in the parent to be like this:

ngOnInit() {
    this.qService.getQuestions().subscribe(
      data => {
         this.currentQuestion = data[0].question;
         console.log(this.currentQuestion); //logs correctly
      },
      error =>  console.log('Error')

    );
}

answered Oct 2, 2018 at 14:04

matchifang

5,49012 gold badges53 silver badges85 bronze badges

Collectives™ on Stack Overflow

Problem with consuming an Observable in Angular 6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related