-1
I have a problem with displaying the html component:
Query graphql in service:
document = gql`
query unidadeMedida($id: ID!) {
unidadeMedida(id: $id){
id
unidadeMedida
descricao
}
}
`;
Interface:
export interface UnidadeMedida {
id: number;
unidadeMedida: String;
descricao: String;
}
Method no ts:
getUnidade(id: number){
this.unss = this.unidadeMedidaService2.watch({
id: id
})
.valueChanges
.pipe(
map(result => result.data.unidadeMedidas)
);
console.log(`this.unss: ${this.unss}`);
}
Making the call:
this.getUnidade(3);
In html:
<tr *ngFor="let unidade of unss | async; let i=index, let first=first">
<td> <span class="badge badge-primary badge-pill">{{ unidade.id}} </span> </td>
<td>{{ unidade.unidadeMedida }}</td>
<td> {{ unidade.descricao}} </td>
The request exits correctly to the server and the same responds with the requested data. And 200 ok.However, html does not display the data, someone has some view of what might be wrong?
Grateful!
In the
console.logthe data are shown correctly?– LeAndrade
On the console displays: [Object Object]
– Adriano
So if the console shows [Object Object] you won’t be able to do the
*ngFor, need to have an API return that is aarray.– LeAndrade
getUnidade(id: number): Observable<Unidademedida[]>{
– Adriano
The first time I made a function in the service that returns an array: getUnidade(id: number): Observable<Unidademedida[]>{ No ts an array receives the result: unss!: Unidademedida[]; . subscribe(data) => (this.unss = data); In Html is the interaction with *ngFor I made some changes and now the console displays:
– Adriano