Проблема с потреблением наблюдаемой в Angular 6 - PullRequest
Новая
       20

Проблема с потреблением наблюдаемой в Angular 6

0 голосов
/ 02 октября 2018

У меня есть простая структура компонентов, где у меня есть угловой компонент с именем gameplay, внутри которого находится дочерний компонент с именем question-box.Цель состоит в том, чтобы извлечь простую строку через бэкэнд-сервис в игровом процессе (который работает нормально) и передать эту строку в question-box для отображения (что не работает).

Вот мой код:

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>

Я попытался использовать асинхронный канал в шаблоне, но он не сработал.Я ожидаю увидеть строку, которую я получил в next() в <p> ребенка;но я ничего не вижуОднако строка правильно регистрируется в консоли.

Любая помощь будет принята с благодарностью.Пожалуйста, дайте мне знать, если я пропустил некоторую информацию, необходимую для поиска решения.Спасибо.

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

Согласно моему комментарию:

Если вы передадите обратные вызовы таким образом, this внутри обратных вызовов - это функция, а не сам компонент.

Изменение функций со стрелками решит проблемупроблема: 

this.qService.getQuestions().subscribe(
      data => this.currentQuestion = data[0].question,
      error => console.log('Error'),
      () => console.log('Done')
);
0 голосов
/ 02 октября 2018

Можете ли вы добавить ngOnChanges к дочернему компоненту, чтобы проверить, было ли распространено изменение ... что-то вроде этого: 

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

Также попробуйте изменить ngOnInit в родительском компоненте набыть таким: 

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

    );
}
...