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

Используйте 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>

Answer 2

NgFor используется для массива. Так что просто проверьте

*ngIf="teaInfo.length>0"