HTML Binding Angular 4

Asked

Viewed 333 times

0

Good afternoon, I need a hand with Angular 4

I have the following method: 

import { Component, OnInit, Input, Output } from '@angular/core';
import { Remedy } from '../remedy/remedy.model'
import { RemedysService } from '../remedys.service'
import { ActivatedRoute } from '@angular/router'
import { Observable } from 'rxjs/Observable'

@Component({
    selector: 'gmr-remedy-details',
    templateUrl: './remedy-details.component.html'
})
export class RemedyDetailsComponent implements OnInit {

    remedy: Remedy

    constructor(private remedysService: RemedysService, private route: ActivatedRoute) { }

    ngOnInit() {
        this.remedysService.remedyByMenuId(this.route.snapshot.params['id'])
            .subscribe(remedy => this.remedy = remedy)
        console.log(`Parametro : ${this.route.snapshot.params['id']}, Remédio ${this.remedy}`)
    }
}

To be placed in a template:

<dl class="col-sm-9 col-xs-12">
    <dt>Categoria</dt>
    <dd>{{remedy?.des_category}}</dd>
    <dt>Dosagem</dt>
    <dd>{{remedy?.des_dosage}}</dd>
    <dt>Descrição</dt>
    <dd>{{remedy?.des_description}}</dd>
    <a href="#" [routerLink]="['/remedy-register']">
        <h4>Cadastrar novo remédio</h4>
    </a>
</dl>

web service search service:

remedyByMenuId(id: string): Observable<Remedy> {
    return this.http.get(`${GMR_API}/api/remedys/remedysMenu/${id}`)
        .map(response => response.json())
        .catch(ErrorHandler.handleError)
}

Note: the URL works because I use for other services and works normally.

But I can’t get Bind so that the values appear in HTML, and I check in the browser by the debug tool the object with all the values of the web service are being returned normally to something I’m doing wrong ?

html angular typescript binding
  • 1

    you can replace .subscribe(remedy => this.remedy = remedy) for .subscribe(remedy => { this.remedy = remedy; console.log(this.remedy); }) and tell me what is imprinted on the console?

  • @merchant has a log in the init function it back Undefined pq I searched the Remedy and set before the execution of the on init then comes Undefined but Since you put it not tested I will test tomorrow and put here worth !

  • undefined in the ngOnInit is expected because your request may take time to return something. Inside the callback of Success on subscribe should come something.

  • Opa good morning all right then the return was an object : log subscribe: [Object Object]

  • then I believe that for every reference of remedy in your template, if you use *ngIf must solve.

  • will be ? but as I would in the template *ngIf="Remedy" ?

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

0


How was: 

ngOnInit() {
        this.remedysService.remedyByMenuId(this.route.snapshot.params['id'])
            .subscribe(remedy => this.remedy = remedy)
        console.log(`Parametro : ${this.route.snapshot.params['id']}, Remédio ${this.remedy}`)
    }
}

Resolution :

  this.remedysService.remedyByMenuId(this.route.snapshot.params['id'])
    .subscribe(response => {
          this.remedy = {des_name : response[0].des_name}
          console.log(this.remedy)
    })

The truth is that the return was coming as an array, after leaving this part aside to deepen my knowledge and go back to analyze realized that returned in array form in the Indice [0] ie it was enough to take the returns of this popular Dice in an object and make the bind of that object.

Browser other questions tagged html angular typescript binding

You are not signed in. Login or sign up in order to post.