0
As I do instead of came the array of all questions, I came one question at a time in my form: Given 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())
}
//retorna uma pergunta só, por id
perguntasById(id:string):Observable<Pergunta>{
return this.http.get(`${MEAT_API}/perguntas/${id}`)
.map( response => response.json())
}
}
Here I return my array of questions all at once:
<section class="content">
<div class="row">
<div *ngFor="let pergunta of perguntas" class="col-sm-6 col-xs-12">
<app-pergunta [pergunta]="pergunta"></app-pergunta>
</div>
</div>
</section>
But I want it to come one at a time, then when I ask the question. id returns me udefined
<a [routerLink]="['/perguntas',pergunta.id]">
{{pergunta.id}}
{{pergunta.titulo}}
</a>
import { Component, OnInit, Input } from '@angular/core';
import { Pergunta } from '../pergunta.model'
@Component({
selector: 'app-pergunta',
templateUrl: './pergunta.component.html',
styleUrls: ['./pergunta.component.css']
})
export class PerguntaComponent implements OnInit {
@Input() pergunta:Pergunta
constructor() { }
ngOnInit() {
}
}
"perguntas":[
{
"id":"1",
"titulo":"Qual o seu comportamento em relação aos seus investimentos?",
"opcoes": [
{
"description":"Preservar meu dinheiro sem correr risco",
},
{
"description": "Ganhar mais dinheiro, assumindo riscos moderados",
},
{
"description": "Ganhar mais dinheiro, assumindo riscos agressivo",
}
]
},
{
"id":"2",
"titulo": "Por quanto tempo você deseja manter os seus investimentos?",
"opcoes": [
{
"description":"até 1 ano",
},
{
"description": "até 1 a 3 anos",
},
{
"description": "de 1 a 3 anos",
}
]
},
{
"id":"3",
"titulo": "Quantos % desses investimentos você pode precisar em um ano?",
"opcoes": [
{
"description":"acima de 75%",
},
{
"description": "de 26% a 74%",
},
{
"description": "até 25%",
}
]
}
]
}
how is your route configuration? and about the latter snippet code, what file it is and how you get into it?
– mercador
export const ROUTES: Routes =[ {path:''', Component:Homecomponent}, {path:'form', Component:Formcomponent}, {path:'questions', Component:Questionscomponent}, {path:'Restaurants/:id', Component:Inquiricomponent}, ]
– ttlelis_12
@merchant I was calling that component which is <app-question>, inside my form to appear only to pargunta with id and title.
– ttlelis_12
can provide component code
<app-pergunta>
? If that component has a@Input
being the typePergunta
then it was supposed to work.– mercador
I’ll put it in the question that gets better visualize
– ttlelis_12
right. I can’t understand how you want it to be shown one at a time. At the moment you show all the questions passing each one inside the
ngFor
for the component. If you want to show one at a time, which will control which one is shown each time?– mercador
So, dude, what’s being my problem, I don’t know how to first show question 1, like your options a,b,c, then ask 2 with your options a,b and c.. etc.
– ttlelis_12
well, the component that has the reference of all questions should decide which question should be passed to the component
<app-pergunta>
. For example, initially you can pass the index question 0 and, based on some action, change the index and so on.– mercador
@MERCHANT or if I made my JSON right, like I’ll ask the question
– ttlelis_12
@merchant I think it so becomes easier that I call everything at once with the options in the form component
– ttlelis_12
but the format of this json is still an array of questions. For me this changes nothing about what should be done.
– mercador
So I’ll call the questions all at once even with the options too
– ttlelis_12