消耗剩余离子3

Question

I am new to the web and Ionic3 development and I have a problem, I followed a tutorial to consume a rest API, I was able to bring the list with the users, however I am wanting to bring a specific user and show it on screen if I change the URL for the user it shows me this error

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.

my app is like this:

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);
    });
  });
}

page .ts:

users: any;

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

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

and so on HTML display:

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

Can u help me?

Answer 1

When trying to get an specific user on your code, this.users ends up being an object instead of an array which is what your template is trying to for loop. You just need to update the template to display the object instead of trying to for loop it.

example:
<ion-item *ngIf="users">
  <h2>{{users.name}}</h2>
  <p>{{users.email}}</p>
</ion-item>

Answer 2

您如何看待该数组，可以使用console.log（JSON.stringify（variable name））;