Ionic2 Restapi是否承诺仅与阵列一起使用

Question

我是ionic2打字标题Angular2中的新手。我已经开发了一个示例应用程序，可以从REST API获取数据。

我使用了一个页面组件，该页面实现了服务提供商，该服务提供商提供了所有数据，以承诺：

uservice.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
  data: any;
  constructor(private http: Http) {
    this.data = null;
  }
  load() {
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }
    // don't have the data yet
    return new Promise(resolve => {
      this.http.get('https://randomuser.me/api/?results=25')
        .map(res => res.json())
        .subscribe(data => {
          this.data = data.results;
          resolve(this.data);
        });
    });
  }
}

HomePage.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {UserService} from '../../providers/user-service';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  users: any[] = [];
  constructor(
    public navCtrl: NavController,
    public userService: UserService
  ) {
    this.userService.load()
    .then(data => {
      this.users = data;
    }) ;
  }
}

HOME.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Demo 103
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <ion-avatar item-left>
        <img [src]="user.picture.medium">
      </ion-avatar>
      <h2>{{ user.name.first | uppercase }}</h2>
      <p>{{ user.email }}</p>
    </ion-item>
  </ion-list>
</ion-content>

现在，在与NGFOR的模板中，一切正常。但是问题到了，当我尝试获取其中一个的详细信息，而不是用户列表。

当我将users: any[] = [];替换为user:any;时，我会发现一个错误，说该模型是未定义的。

就像我没有数组一样。我的模板不等待承诺来渲染页面。我不能用对象使用承诺吗？它仅用于数组吗？

Answer 1

您也可以使用对象承诺。但是请注意，当模板呈现您的对象时，"用户"是不专门的，而当您这样声明时：

user:any

这就是为什么您会遇到错误的原因。您可以通过添加"？"来防止错误。在模板中变量后标记。

  <ion-list>
    <ion-item>
      <ion-avatar item-left>
        <img [src]="user?.picture.medium">
      </ion-avatar>
      <h2>{{ user?.name.first | uppercase }}</h2>
      <p>{{ user?.email }}</p>
    </ion-item>
  </ion-list>

Answer 2

注意：您的模板甚至在解决API数据解决承诺之前就已经渲染了。这是正确的行为。加载数据后，该模板再次刷新。

首先，当数据未加载并且在没有任何数据的情况下已经渲染模板时。您的*ngFor="let user of users"试图检查任何数据，但找不到任何数据。因此，它起作用了，什么也没有。一旦解决了API承诺并且您拥有数据，它就会刷新正确的模板。

现在，当您尝试直接访问user（在执行user:any之后）时，没有ngFor或ngIf：

<ion-item>
  <ion-avatar item-left>
    <img [src]="user.picture.medium">
  </ion-avatar>
  <h2>{{ user.name.first | uppercase }}</h2>
  <p>{{ user.email }}</p>
</ion-item>

user:any目前没有任何属性为图片，名称等（在解决承诺之前）。因此，它无法访问任何数据。因此错误。

这与该对象或数组问题无关。这就是您的处理方式。

如果要纠正此行为，请使用任何条件表示"如果存在数据"。

，例如

<ion-item *ngIf="user">
  <ion-avatar item-left>
    <img [src]="user.picture.medium">
  </ion-avatar>
  <h2>{{ user.name.first | uppercase }}</h2>
  <p>{{ user.email }}</p>
</ion-item>

另外，如果您的API导致数组，我不明白您如何访问user.picture或任何属性。user[<index>].picture难道不是正确的吗？（同样，您需要确保用户具有<index>的数据）。

Answer 3

现在我明白了...我没有意识到，甚至不知道"？"。谢谢你们两个！