Angular ngIf показывает еще шаблон перед оценкой условия - PullRequest
Новая
       9

Angular ngIf показывает еще шаблон перед оценкой условия

1 голос
/ 01 апреля 2019

Я проверяю, есть ли какие-либо элементы в массиве, прежде чем их показывать. Если нет, должно появиться сообщение «недоступно».

Класс: 

public lists = [];
public isLoading: boolean = false;

ngOnInit() {
  this.getLists()
}

getLists() {
  this.isLoading = true;
  this.list.getShoppingLists().subscribe(data => {
    this.isLoading = false;
    this.lists = data.data;
  });
}

Шаблон: 

<mat-spinner *ngIf="isLoading" class="mx-auto"></mat-spinner>

<div *ngIf="lists.length > 0; then withLists else withoutLists"></div>

<ng-template #withLists>
  <div *ngFor="let list of lists">
      <p>{{list.title}}</p>
  </div>
</ng-template>

<ng-template #withoutLists>
 <p>No lists available</p>
</ng-template>

Проблема, с которой я столкнулся, заключается в том, что в шаблоне отображается сообщение «недоступно», а данные возвращаются из API, а это не должно. Есть идеи, почему это происходит, и как мне решить эту проблему?

Ответы [ 2 ]

3 голосов
/ 01 апреля 2019

Это происходит потому, что ваше условие if основано на длине массива lists, которому присваивается начальное значение пустого массива.

Обновление логики для включения isLoading поможет в этом конкретном сценарии.

<div *ngIf="isLoading || lists.length > 0; then withLists else withoutLists"></div>

Согласно комментариям ниже, лучшим подходом может быть сделать что-то похожее на: 

<ng-component *ngIf="!isLoading">
   <div *ngIf="lists.length > 0; then withLists else withoutLists"></div>
</ng-component>

Таким образом, цель кода будет более понятной. Если он все еще загружается, не показывать ничего. В противном случае покажите diff с логикой if / else, основанной на длине списков.

0 голосов
/ 01 апреля 2019

обратный вызов в подписке является асинхронным, что означает, что список пуст во время загрузки данных, поэтому вам нужно дождаться завершения загрузки.Вы можете решить эту проблему, набрав: 

<div *ngIf="isLoading || lists.length > 0; then withLists else withoutLists"></div>

или обернув все так: 

<div *ngIf="isLoading">
    <div *ngIf="lists.length > 0; then withLists else withoutLists"></div>

    <ng-template #withLists>
        <div *ngFor="let list of lists">
            <p>{{list.title}}</p>
        </div>
    </ng-template>

    <ng-template #withoutLists>
        <p>No lists available</p>
    </ng-template>
</div>
...