Question

在我的Ionic 2应用程序中，我从API获取对象的数据。然后我想在我的模板中显示这个对象的细节。

问题是模板试图在从API加载对象之前显示对象，当然因为对象未定义而抛出错误。

这是流程：

showRide()被称为：

showRide(rideId) {
    this.navCtrl.push(DetailsPage, {
      rideId: rideId
    });
  }

DetailsPage组件打开：

export class DetailsPage {

    rideId: any;
    ride: any;

    constructor(public navCtrl: NavController, public navParams: NavParams, public rides: Rides) {
        this.rideId = this.navParams.get('rideId');
        this.rides.getRide(this.rideId).subscribe(response => { this.ride = response.ride });
    }

}

this.rides.getRide调用从API获取数据的方法。

getRide(rideId) {
      var headers = new Headers();
      headers.append('Authorization', 'Token token=' + this.authentification.token);
      return this.http.get('URL' + rideId , { headers: headers })
      .map(res => res.json());
    }

在我的模板中，我尝试显示ID

{{ ride.id }}

这给了我一个错误，即id不是未定义的属性。

如何确保我的模板仅在对象可用后呈现？

我尝试将*ngIf="ride"添加到我的离子内容中。这可行，但会弄乱整个布局。我相信有一种更好的方法可以用它。

Answer 1

您可以使用安全导航操作员（{{ ride?.id }}）来保护＆＃34;您的模板，直到REST调用完成并且数据可用：

ride

详细了解安全导航操作员here。

您也可以简单地将初始值分配给undefined，因此在模板渲染时它不是ride: any = {};：

IF NOT EXISTS (SELECT * FROM Table_2 WHERE ISSUE_KEY = 'XYZ-56')
BEGIN

INSERT INTO Table_2 (MODULE_ID, ISSUE_KEY) SELECT ID, 'XYZ-56' FROM Table_1
WHERE Table_1.GROUP_ID = 'com.abc' AND Table_1.ARTIFACT_ID = 'pqrd' AND 
Table_1.VERSION = '4.0.0'

END

仅在Ionic 2中准备好数据时才渲染模板

1 个答案: