Property 'includes' is Missing in type 'Subscription'

Question

I am wanting to map the list of questions and throw them in the questions property of my JSON object, but ai at the prompt gives this error:

"ERROR in src/app/form/questions/questions.component.ts(19,5): error TS2322: Type 'Subscription' is not Assignable to type 'Question[]'.
Property 'includes' is Missing in type 'Subscription'."

These are my questions:

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

import { Pergunta } from '../perguntas/pergunta.model'
import { PerguntasService } from '../perguntas.service'

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

  perguntas: Pergunta[]

  constructor(private perguntasService: PerguntasService) { }
 //ass
  ngOnInit() {
    this.perguntas = this.perguntasService.perguntas()
        .subscribe(perguntas => this.perguntas = perguntas)
  }

}

This is my service:

import { Injectable } from '@angular/core';
import { Pergunta } from './perguntas/pergunta.model'
import { PerguntasComponent } from './perguntas/perguntas.component'
import { Http} from '@angular/http'
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/operator/map'
import { MEAT_API} from '../app.api'

@Injectable()
export class PerguntasService{

  constructor(private http:Http){}




    perguntas(): Observable<Pergunta[]>{
      return this.http.get(`${MEAT_API}/perguntas`)
      .map( response => response.json())
    }



}

and my modules app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { ModalModule } from 'ngx-bootstrap/modal';
import { FormsModule } from '@angular/forms';
import { ROUTES } from './app.routes';


import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FormComponent } from './form/form.component';
import { PerguntasComponent } from './form/perguntas/perguntas.component';
import { OpcoesComponent } from './form/perguntas/opcoes/opcoes.component';
import { PerguntasService } from './form/perguntas.service';



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    FormComponent,
    PerguntasComponent,
    OpcoesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
     HttpModule,
    RouterModule.forRoot(ROUTES),
    ModalModule.forRoot()
  ],
  providers: [PerguntasService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Your problem is that you are trying to assign the result of subscribe to his list of Pergunta, when the value is already applied within the first callback.

Therefore, make the following modification:

questions.componentts.

ngOnInit() {
    this.perguntaService
        .perguntas()
        .subscribe(perguntas => this.perguntas = perguntas);
}