hey buddies, im getting error while trying to show data in view. Helpe me please…
“Cannot read property ‘logradouro’ of undefined”
PS: console.log of data from http request
Object {cep: "84020-150", logradouro: "Rua Catão Monclaro", complemento: "", bairro: "Centro", localidade: "Ponta Grossa"…}
CADASTRO.TS
import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import {Http} from '@angular/http';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'page-cadastro',
templateUrl: 'cadastro.html'
})
export class CadastroPage {
public enderecoData: any;
constructor(
public nav: NavController,
private http:Http,
public formBuilder: FormBuilder,
public alertCtrl: AlertController ) {
}
elementChanged(input){
let field = input.inputControl.name;
this[field + "Changed"] = true;
if (field == 'cep') {
this.http.get('https://viacep.com.br/ws/'+input.inputControl.value+'/json/')
.map(res => res.json())
.subscribe(data => {
this.enderecoData = data;
});
}
}
}
CADASTRO.HTML
<ion-item>
<ion-label stacked>Rua</ion-label>
<ion-input clearInput #rua formControlName="rua" type="text" (change)="elementChanged(rua)"
[class.invalid]="!cadastroForm.controls.rua.valid && (ruaChanged || submitAttempt)">{{enderecoData.logradouro}}</ion-input>
</ion-item>
I would seed enderecoData
in the component constructor to some dummy value so that by the time the template wants to access it, it’s not undefined.
please. can you give me an example buddy?
i tried to force a value in constructor, but nothing happened in view
in constructor …
this.enderecoData = {
"rua" : "Catão Monclaro"
}
html
<ion-item>
<ion-label stacked>Rua</ion-label>
<ion-input clearInput #rua formControlName="rua" type="text" (change)="elementChanged(rua)"
[class.invalid]="!cadastroForm.controls.rua.valid && (ruaChanged || submitAttempt)">{{enderecoData.rua}}</ion-input>
</ion-item>
You need to add more imports. Map is not declared.
Hi All,
I wanted to post a very short explainer for the http.get() call since nearly every article I’ve read has 2 vital parts missing: proper error handling & timeout enforcement.
First, in your *.ts file, include the following libraries and operators:
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
Next, the constructor needs to pass in an HTTP object:
constructor(public _http: Http) {
// we don't need to do anything here to _h…
Thank you Ryan about your tutorial. My response is ok, my problem is how to show that in HTML
Buddies i’m so sorry about my basics HTML’s mistakes! i was putting the {{enderecoData.logradouro}} between the
{{enderecoData.logradouro}} and the correct is in
INCORRECT
<ion-input>{{enderecoData.logradouro}}</ion-input>
CORRECT
<ion-input value="{{enderecoData.logradouro}}"></ion-input>
Thank you for your help.
I’m a little concerned because syntactically, they should both work.
This should work as well…
<ion-input [value]="enderecoData.logradouro"></ion-input>
caution! writing this code off the top of my head!
1 Like