Angular2 如何正确使用 ngIf 仅在没有来自服务器的数据时显示一些文本？

Question

我正在从服务器获取一些数据并使用 ngFor 来显示它们（这是搜索功能）但是当没有结果时，我想显示文本说“没有结果”

我该怎么做？

到目前为止我已经尝试过了，但是没有用。

 <div *ngIf="teaInfo != '{}'">

        <div class="starter-template text-xs-center">
            <h5 style = "text-align:center">No result</h5>

        </div>

   </div>

Answer 1

NgFor 用于数组。所以只需检查

*ngIf="teaInfo.length>0"

Answer 2

使用 ngSwitch 检查数据是否存在并显示 默认消息 如果没有数据可用，如下所示：

您也可以借助 IF 语句获得以下结果，但建议使用 Switch 而不是 If 语句以获得更好的性能。

<div [ngSwitch]="true">
    <div *ngSwitchCase="teaInfo != null && teaInfo.length>0">
        //Perform operation on data
    </div>
    <div *ngSwitchDefault>
         There's no result                 
     </div>
</div>

Angular2 如何正确使用 ngIf 仅在没有来自服务器的数据时显示一些文本？

Angular2 How can I use ngIf correctly to show some text only when there's no data from server?

angular-ng-if

angular