如何仅当来自服务器端的数据时才呈现html [英] how to render html only when data from got server side

问题描述

我正在使用angular4.我正在将一个div用于HTML中找不到的数据.而且我希望该div仅在数据不会出现时才显示.但是，要获取我的数据需要花费时间，而未找到的数据div也将显示，直到不显示时间数据为止.但是我只想在数据不存在时显示.

I am using angular 4. I am using one div for data not found in my HTML. And I want this div should display only if data will not come. But for fetching my data it's taking time meanwhile data not found div also show, till the time data is not display. But I want to display only when data is not there.

为此，我在component.ts中使用以下代码:

For this, I am using below code In component.ts :

this.allData -> In this all data is coming but taking time.

下面是HTML文件中的代码:

Below is code in HTML file:

<div *ngIf="allData && allData.length > 0 else noResultFound">
This is testing data come from allData variable.
</div>
<ng-template #noResultFound>
    <h2>Sorry, no results found.</h2>
</ng-template>

我遇到了一个问题，假设获取数据需要10秒钟，并且noResultFound div显示需要10秒钟.我想只在数据长度为0时才显示.

I am facing a problem that, suppose it takes 10 seconds to fetch data, and for 10 seconds noResultFound div show. I want if should display only if data length is 0.

谢谢

推荐答案

您的代码非常正确.您需要在 ngIf 中的 else 之前添加; .因此，您的html将是:

Your code is pretty much right. You need to add a ; before the else in your ngIf. So you html would be:

<div *ngIf="allData && allData.length > 0; else noResultFound">
This is testing data come from allData variable.
</div>
<ng-template #noResultFound>
    <h2>Sorry, no results found.</h2>
</ng-template>

这篇关于如何仅当来自服务器端的数据时才呈现html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！