从Web服务加载对象，如果在Ionic 2中显示为空，则显示消息

Question

在我的Ionic 2应用程序中，我从Web服务加载对象并在我的应用程序中将它们显示为离子列表。如果没有对象我想要显示消息。

http请求已经有效。

所以我做了什么：

export class RidePage {

  rides: Array<any>;

  constructor() {
    this.rides = this.loadRides(THIS GETS DATA FROM THE PROVIDER);
  }

在我的模板中，我有：

<p *ngIf="rides.length == 0">No conent</p>

但这会返回错误：

Cannot read property 'length' of undefined

Answer 1

由于您是从异步调用中获取结果，因此您需要检查是否存在游乐设施并检查长度，

<p *ngIf="rides && rides.length == 0">No conent</p>

或者你可以在这里使用安全导航操作员

<p *ngIf="rides?.length == 0">No conent</p>

Answer 2

当HTTP请求填充时，

rides未定义。将其设置为空或使用安全操作符rides?.length

<p *ngIf="rides?.length == 0">No conent</p>

或

export class RidePage {

  rides: Array<any> = [];

  constructor() {
    this.rides = this.loadRides(THIS GETS DATA FROM THE PROVIDER);
  }

编辑

如果您想在没有可用内容时显示该文本，只需检查rides是否为空，否则ngIf评估为false，您将看不到文本。

<p *ngIf="rides">No conent</p>