0

olá, sou novo na área de Web e Ionic3 e estou com um problema, segui um tutorial para consumir uma API rest, consegui trazer a list com os usuários, porem estou querendo trazer um usuario específico e mostrar na tela, se eu mudo a URL para o usuário ele me mostra esse erro

TabCepPage.html:10 ERROR Error: Cannot find a differ supporting object
'[object Object]' of type 'Leanne Graham'. NgFor only supports binding 
to  Iterables such as Arrays.

meu app ta assim:

provider: rest.ts

apiUrl = 'https://jsonplaceholder.typicode.com';

constructor(public http: HttpClient) {
  console.log('Hello RestServiceProvider Provider');
}

getUsers() {
  return new Promise(resolve => {
    this.http.get(this.apiUrl+'/users/1').subscribe(data => {
      resolve(data);
    }, err => {
      console.log(err);
    });
  });
}

ts da pagina:

users: any;

constructor(public navCtrl: NavController, public restProvider: RestProvider) {
  this.getUsers();
}

getUsers() {
  this.restProvider.getUsers()
  .then(data => {
    this.users = data;
    console.log(this.users);
  });
}

e no HTML exibo assim:

<ion-item *ngFor="let user of users">
  <h2>{{user.name}}</h2>
  <p>{{user.email}}</p>
</ion-item>

Alguem pode me ajudar?

1
  • por favor alguem poderia ajudar? estou fazendo um app para uma empresa e meu emprego depende disso! 14/09/2017 às 23:54

1 Resposta 1

1

Se você olhar o erro com calma ira ver que o Ngfor esta tentando iterar sobre um objeto 'Leanne Graham' que não há suporte e que é o atributo name retornado pela API. Como você está retornando apenas um objeto, seu html ficará assim:

HTML

<ion-item>
  <h2>{{user?.name}}</h2>
  <p>{{user?.email}}</p>
</ion-item>

Obs: se você usar o Ctrl + Shift + J, você irá abrir o console do navegador(Chrome), e poderá ver como o objeto está sendo retornado, através dos console.log().

8
  • Obrigado pela resposta amigo, mas não estou conseguindo exibir ainda, o chrome me reporta esse erro: ERROR TypeError: Cannot read property 'name' of undefined at Object.eval [as updateDirectives] e esse ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'name' of undefined TypeError: Cannot read property 'name' of undefined 15/09/2017 às 14:46
  • o que aparece no console quando você chama getUsers()? Talvez você terá que pegar o primeiro item do array assim: this.users = data[0]; 15/09/2017 às 14:58
  • olá, eu to tentando pegar o usuário único, não tem array, ele ta pegando isso: {id: 1, name: "Leanne Graham", username: "Bret", email: "[email protected]", address: {…}, …} address : {street: "Kulas Light", suite: "Apt. 556", city: "Gwenborough", zipcode: "92998-3874", geo: {…}} company : {name: "Romaguera-Crona", catchPhrase: "Multi-layered client-server neural-net", bs: "harness real-time e-markets"} email : "[email protected]" id : 1 name : "Leanne Graham" phone : "1-770-736-8031 x56442" username : "Bret" website : "hildegard.org" proto : Object 15/09/2017 às 16:02
  • pois é, isto aqui resolve o seu problema this.users = data[0] 15/09/2017 às 16:08
  • eu fiz isso: getUsers() { this.restProvider.getUsers() .then(data => { this.users = data[0]; console.log(this.users); }); } ai aparece ERROR TypeError: Cannot read property 'name' of undefined at Object.eval [as updateDirectives] e no getusers() ele me retorna Undefined 15/09/2017 às 17:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .