消耗剩余離子3

Question

我是Web和Ionic3開發的新手，我遇到了問題，我按照教程使用了剩余的API，可以將列表帶給用戶，但是我想帶一個特定的用戶並在屏幕上顯示如果我更改用戶的網址，則會顯示此錯誤

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.

我的應用程序是這樣的：

提供者：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頁：

users: any;

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

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

等等在HTML顯示中：

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

你能幫我嗎？

Answer 1

當嘗試在代碼上獲取特定用戶時，this.users最終將成為對象而不是數組，這正是您的模板試圖進行循環的對象。 您只需要更新模板以顯示對象，而不是嘗試對其進行循環。

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

Answer 2

您如何看待該數組，可以使用console.log（JSON.stringify（variable name））;